CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrapnavbar
U23r
U23r

Reputation: 1703

Fixed navbar with bootstrap

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.

Upvotes: 3

Views: 27971

Answers (6)

Spasal
Spasal

Reputation: 43

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 :)

Upvotes: 3

user2598812
user2598812

Reputation:

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>

Upvotes: 3

sudipt dabral
sudipt dabral

Reputation: 1485

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;
}

Upvotes: 3

tribe84
tribe84

Reputation: 5622

In the navbar div, you should add the class name .navbar-fixed-top.

Upvotes: 2

Chris Mackie
Chris Mackie

Reputation: 386

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

Upvotes: 4

Mckay Multimedia
Mckay Multimedia

Reputation: 1096

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.

Upvotes: 2

Related Questions