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.
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)
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.
On line 28 of
header.php
change the class of the navbar css as follows:Replace the class
navbar-relative-top
withnavbar-fixed-top
. Therefore, line 28 becomes