Reputation: 95
I am using Twitter Bootstrap to and I would like the menu to stick at top of the browser while scrolling. The navbar gets to the top of the browser at first but when scrolling it is scrolled away. I am using the standard setup of a menu found at twitter bootstrap
<nav class="navbar navbar-fixed-top" id="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand animated fadeInDown" href="<?php bloginfo('url'); ?>">
<img class="center brand-logo" style="margin-top: 18px;" height="30px" src="<?php bloginfo('template_directory'); ?>/img/Triday-fat.png" alt="Loggan för Triday, designade hemsidor till ett lågt pris"/>
</a>
<button type="button" class="navbar-toggle" 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>
<ul class="nav navbar-nav">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</div> <!-- /. container-fluid-->
</nav>
and the css is the standard bootstrap but when it didn't work I have tried to add
.navbar { position: fixed; width: 100%; height: 60px; top: 0; }
I would be thankful if someone could help me figure out what I am doing wrong!
Upvotes: 2
Views: 8537
Reputation: 859
In my case it was a z-index: 1000; which was applied on a div#header where my nav.navbar-fixed-top was in.
When I removed the z-index, my menu was moving smoothly.
Upvotes: 0
Reputation: 474
If u are using animate.css then add
position: fixed !important;to
navbar-fixed-topIt works..
Upvotes: -1
Reputation: 95
To those who have had the same problem as I, I found a solution! The problem was that I used an animate.css effect on the tag which somehow disabled the fixed position on it's children... When the effect was removed fixed position worked! Thanks to you guys who helped me!
Upvotes: 1
Reputation: 8113
This is all you need to have a fixed to top nav bar:
<header class="navbar navbar-default navbar-fixed-top " id="top" role="banner">
</header>
Try it out here a bootply. Here is the docs on it.
Upvotes: 3