Nav-stacked vertical nav in place of horizontal list

1

This is an extremely novice question, but something is just not click. Please excuse my thick headedness.

In my attempt to style the navbar, I’m unable to find the necessary list (ul) and list items (li) as referenced in the Bootstrap documentation. This is what I see as my best option, in header-top-navbar.php, to edit the class of the navbar:

<nav class="collapse navbar-collapse" role="navigation">
  <?php
    if (has_nav_menu('primary_navigation')) :
      wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
    endif;
  ?>
</nav>

I suppose I could essentially replace the PHP with a list and list items, but I’d like to retain the PHP so that the ‘active’ class remains functional.

Am I looking in the wrong place? Right now, it is my understanding that I could just change the class “navbar-collapse” to “nav-stacked” or something similar, but this is not returning desired results (the navbar disappears, apparently I’m not editing the right selector). Any help would be very much appreciated.

1 Like
2

If you take a look at the source your navbar will look like this:

<nav class="collapse navbar-collapse" role="navigation">
   <ul id="menu-primary-navigation" class="nav navbar-nav">
      <li class="active menu-home"><a href="/">Home</a></li>
      <li class="menu-sample-page"><a href="/sample-page/">Sample Page</a></li>
      <li class="menu-about"><a href="/about/">About</a></li>
   </ul>
</nav>

which you can target in app.less with

.navbar-nav {

}
.navbar-nav > li {

}
.navbar-nav > li > a {

}

or if you want to make sure only the top navbar gets you new styles you can do

.banner {
   .navbar-nav {

   }
   .navbar-nav > li {

   } 
   .navbar-nav > li > a {

   }
}

You do not have to change anything within header-top-navbar.php

1 Like
3

Enollo, thank you so much.

After getting used to the new workflow of using Grunt, LESS, and all that, I’d forgotten my old workflow of inspecting and iterating with the browser.

Again, thanks so much.

4

If I’ve understood correctly, remove support for the navbar in lib/config.php and then add nav-stacked to nav-pills in templates/header.php.

2 Likes
5

No problem, small things often get me stumped too. It’s usually following a long day :slight_smile:

Nick’s solution is also worth looking into depending on the amount of changes you want to make

6

I would think that this is probably the preferred route, since nav-stacked automatically gives you the vertical orientation and you wouldn’t have to redefine any of the base nav styles (which you may wind up needing elsewhere).