This simple thing is frustrating me for hours. I have a simple navigation bar which has a brand logo. But the logo disappears sometimes(still loaded but hidden below) from the navigation bar.
HTML:
<nav class="header_blue navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inner">
<a class="navbar-brand" href="">
<img id="my_img" style="display:block !important;" src="img/logo_img.png" alt="logo_img" class="img-responsive">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
</ul>
<div class="nav navbar-nav navbar-right" ng-hide="currentUserSignedIn">
<ul class="list-inline pull-right">
<li>
Register
</li>
<li>
<a href="" id="sign_in" data-target="login_modal" >Sign In</a>
</li>
</ul>
</div>
</div>
</div></nav>
CSS:
.header_blue{
background:none repeat scroll 0% 0% #073648;}
Related
what I'm trying to do is to split my navbar in left, center and right, on left it will be the Application name, on the center the different menu options but the text centered, on right should be the app logo (this will be hidden when minor resolutions appear) something like the below image
At the moment this is what I have (navbar title needs to be on the middle align, menu options and user info centered and the logo should be on right instead of next to menu)
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<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="#">
<h2>Application Name</h2>
</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home</li>
<li>About</li>
</ul>
<p class="navbar-text">
<span class="welcome">
Welcome, Richard Sanchez
</span>
</div>
<div class="navbar-logo navbar-right">
<a class="navbar-brand" rel="home" href="#" title="Home">
<img width="300" height="40" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" class="img-responsive">
</a>
</div>
</div>
</div>
Here is a fiddle to play with
Pd. I'm using bootstrap 3.3.7
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">
About
</a></li>
<li><a href="#contact">
Contact
</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
The above is the code of bootstrap navbar header which collapses when screen size decreases. Could anyone help me to make the body position fixed only when the navbar header dropdown is open.
Thanks.
Sounds like .toggleClass() is what you need.
if (!$("relevant-div").hasClass("open-class")){ // or collapse class
$("body").toggleClass("body-fixed");
}
.body-fixed { // sample
position: fixed;
}
I have 2 nav bars that I want both the be at the top of the page initially but upon scrolling I want the first nav bar with the brand image to collapse away and the second nav bar with the list links to snap to the top of the page where the first nav bar initially was. Does anyone know how I can do this? Here's an image for reference:
HTML:
<!----- Navbar ----->
<nav class="navbar navbar-default navbar-collapse">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search products..">
</div>
<button type="submit" class="btn btn-secondary" id="product-search-btn"><span class="glyphicon glyphicon-search"></button>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="info-head">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tobi's Site</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About Us</li>
<li>FAQ's</li>
<li>Contact Us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Work With Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drivers</li>
<li>Partners</li>
<li>In House</li>
</ul>
</li>
<li>T's & C's</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</nav>
Use the Bootstrap affix component to pin the 2nd navbar when the page is scrolled. Then add the CSS for the affix class to position the navbar when it's pinned to the top.
$('#nav2').affix({
offset: {
top: 50
}
});
2 navbars example: http://codeply.com/go/hi6zhTU4h2
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="">
<img alt="null">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Products
</li>
<li class="active">About
</li>
<li class="active">Testimonials
</li>
<li class="active">Order
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
</div>
</nav>
<section id="products">
<div></div>
</section>
I change my section class="products" to section id="products", and when I click it, nothing happen.
The reason why I used id is because the active navbar is not showing. I'm using findcond navbar bootstrap.
You can use like this
<section id="products" class ="products">
Since I don't know about back-end operations, cannot sure about it. I trust some operations are done by that css class products.
I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse ">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.
Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)