Sticky Header in WordPress using BootstrapWP theme

So I am using Rachel Baker’s open source BootstrapWP starter theme to develop a WordPress theme. There is a repository on Github but I didn’t think this question was appropriate to post there.

I am trying to get the header to be static but I am unsure of how to make it work. I have found a working example that achieves this with this theme but I can only see the HTML output as an example. I am a novice WordPress coder just trying to figure things out. I cannot see or figure out what is the best way to achieve this.

Read More

So on the example site where this feature is working the HTML being output by the header.php file has different classes of the header so that depending on where the browser is the correct header will be displayed. It outputs three separate nav-menu lists in the HTML. The first nav-menu starts with <li id="" > and the following two don’t have an id, they only have <li class="">.

Here is a pic: ( Or just see the pastebin shared below)

enter image description here

Here is a pastebin of this code including the jquery script being used.

I am assuming that this can be achieved with the wp_nav_menu php code in the header but I wasn’t sure how to do this.

                <?php wp_nav_menu(
                        array(
                        'menu' => 'main-menu',
                        'container_class' => 'nav-collapse collapse left-aligned nav-collapse-main',
                        'menu_class' => 'nav',
                        'fallback_cb' => '',
                        'menu_id' => 'main-menu',
                        'walker' => new Bootstrapwp_Walker_Nav_Menu()
                    )
                ); ?>

Theme has a Custom Walker file which is in the includes folder, can be easy seen in the Github repo, this site wouldn’t let me share more than 2 links per post, sorry.

I’ve got lots of questions but I think my first one would be, do I need a loop of multiple wp_nav_menu calls or is there a better method? Thought this would be a nice feature for anybody using Bootstrapped WordPress themes, hope someone can help.

Related posts

Leave a Reply

1 comment

  1. On line 28 of header.php change the class of the navbar css as follows:
    Replace the class navbar-relative-top with navbar-fixed-top. Therefore, line 28 becomes

    <div class="navbar navbar-inverse navbar-fixed-top">