jquery - Navbar to overlay background color & image -
question 1: want have navbar affix overlay on top of background color & background image of div (top-banner), when scroll down. background color overlay navbar affix instead.
how achieve such navbar on top of background color div class top-banner.
there 1 more issue navbar sort of having margin left on itself, when added data-spy affix, navbar move right, causing white space on left , when rescale screen smaller device size, navbar collapse menu unclickable unless click extreme right, toggle menu. not sure why affix got such issues. how fix it.
thanks helping resolve issues!!
below code
<html> <head> <title>demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .navbar-header, .navbar-brand { line-height: 100px; height: 100px; padding-top: 0; } .affix .navbar-default { position: fixed !important; top: 0 !important; width: 100% !important; background-color: #957595 !important; } .affix { width: 100% !important; } @media screen , (min-width: 768px) { .navbar-header { padding-left: 200px; text-align: center; } } .top-banner{ background-color: #b0c4de; background-image: url("bi-uk-office7-2.jpg"); background-repeat: no-repeat; background-position: right top; } </style> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <!-- static navbar --> <div id="nav" data-spy="affix"> <nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.9);"> <div class="container-fluid"> <div class="navbar-header header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#"><font color="white">link 1</font></a></li> <li><a href="/list"><font color="white">link 2</font></a></li> <li><a href="/list"><font color="white">link 3</font></a></li> </div><!--/.nav-collapse --> </div> </nav> </div> <section> <div class="col-xs-12"> <div class="top-banner"> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> hello world<br/> <hr> </div> </div> </section> </div> </body> </html>
add z-index #nav below on top , add margin-left property same stay of extreme left getting padding parent container-fluid
#nav { z-index:1000; margin-left: -15px; }
Comments
Post a Comment