Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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