Fixed navbar with bootstrap

1 Views

I’m trying to change the navbar in my child theme but I’m a newbie. I read some questions here about that and even saw the bootstrap site, but I don’t understand how to solve my problem. I’m sorry for my ignorance but could someone explain to me how it works?

I’m using this theme http://demos.codexcoder.com/#limo_wp and I would like to fixed the navbar instead of this “blink” and float. Just stay fixed after scroll the page.

Post Views: 1

Related posts

Leave a Reply

6 comments

  1. You can find an example on the bootstrap website.

    http://getbootstrap.com/examples/navbar-fixed-top/

    Or you can change 

    <section id="headnev" class="navbar topnavbar">

    to

    <section id="headnev" class="navbar navbar-fixed-top">

    in your header file and remove:

    // Script for top Navigation Menu
    jQuery(window).bind('scroll', function () {
      if (jQuery(window).scrollTop() > 100) {
        jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
        jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
      } else {
        jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
        jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
      }
    });

    from custom.js

  2. The following command:

    Fixed to top:
    Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        ...
    </div>
</nav>

    If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element. I wrote the following code based on your template.

    <script>
    if ( $('body').scrollTop() > $('.section-a').position.top ) {
         $('#headnev').removeClass('topnavbar');
         $('#headnev').addClass('navbar-fixed-top');
     }
</script>

  3. just add a class="nav navbar navbar-fixed-top"

    I’ll give you an example of my code, just use it and see how it works.

    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container" id="container">
        <div class="navbar-header">

            <div class="navbar-brand"><a href="nature.html">Project Nature</a></div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#"><a href="#">Plants</a></a></li>
                        <li><a href="#"><a href="#">Landscapes</a></a></li>
                        <li><a href="#"><a href="#">Animals</a></a></li>
                        <li><a href="#"><a href="#">Elements</a></a></li>
                    </ul>
                </li>

                <li><a href="#">Gallery</a></li>
                <li><a href="#">Blah</a></li>
                <li><a href="#contact" data-toggle="modal">Contact</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#"><a href="#">Twitter</a></a></li>
                        <li><a href="#"><a href="#">Facebook</a></a></li>
                        <li><a href="#"><a href="#">Google+</a></a></li>
                        <li><a href="#"><a href="#">LinkedIn</a></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


</div>

    This will generate a navbar with a heading (title)
    5 menu items of wich 2 are dropdowns.

    Greetings 🙂

  4. You would need to add something like the following CSS to a child theme to override this behavior in the parent theme.

    #header .navbar {
    animation:none !important;
}

    If you aren’t familiar with WordPress child themes, here is a good resource for you. There may even be a theme setting for this. Depends on what the theme developer made available in the theme’s options.

  6. You could try my css also, simple yet effective if you are positioning it always on the top 

    .navbar{
    position:fixed;
    width:100%;
    z-index: 1000000;
    top:0;
}