Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Creating Bootstrap Navigation in WordPress

Paul Roberts
Paul Roberts
7,928 Points
Posted by Paul Roberts
Paul Roberts
7,928 Points

Can't implement WordPress Menu with Bootstrap v4

I'm going through these videos using Bootstrap v4 but I am stuck trying to set the Navigation Menu up with WordPress. I can get the WP menu to appear but I simply can't get the original Bootstrap css to work with the WordPress menu items from wp_nav_menu.

Here is the code navigation code from the updated Jumbotron theme:

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

I understand that the following code has to be implemented but I just can't work out exactly where and with which menu classes:

<?php

          $args = array(

            'menu'          => 'header-menu',

            'menu_class'    => 'nav navbar-nav',

            'container'     => 'false'

          );
          wp_nav_menu( $args );
        ?>

Thank you for any help on the matter.

1 Answer

Paul Roberts
Paul Roberts
7,928 Points
Paul Roberts
Paul Roberts
7,928 Points

Oh I've managed to work it out. I'm not sure of the exact reason why but you can change the colour of everything except the font using my assigned classes. All I had to do was input into my "style.css":

my-nav a {
color: red;}

And that worked! Simple when you know how ;)