CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmenucss-position
HannesH
HannesH

Reputation: 95

Fixed to top navbar not working

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

Answers (5)

Bartuzz
Bartuzz

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

Kedar Tendolkar
Kedar Tendolkar

Reputation: 474

If u are using animate.css then add

position: fixed !important;
to 
navbar-fixed-top
It works..

Upvotes: -1

HannesH
HannesH

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

Jordan.J.D
Jordan.J.D

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

lcsmontiel
lcsmontiel

Reputation: 1

add top:0px;

This probably wil fix.

Upvotes: 0

Related Questions