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

Posted by jakepoulios
jakepoulios
404 Points

Issue With Wordpress/Bootstrap Nav

Hi, I just successfully finished the Bootstrap to Wordpress course. Unfortunately, there's been some issue with my CSS and PHP in regards to the navbar. As you can see from the image below (in the link), the navbar is white and not displaying correctly.

https://drive.google.com/file/d/0B96ktl5B276gVUxnODNESGliV1E/view?usp=sharing

Here is my code:

body {
    padding: 0 0 20px 0;
}

.admin-bar .navbar-fixed-top {
    margin: 30px 0 0 0;
}

@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: #222;
        padding: 10px 15px;
        width: 200px;       
    }

    li:hover .sub-menu {
        display: block;
    }

}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu a  {
    color: #999;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;    
}   

.current-menu-item > a, .current-menu-parent > a {
    background: #000;   
}

.current-menu-parent li a {
    background: inherit;
}

.current-menu-parent .current-menu-item a {
    color: #fff;
    font-weight: bold;
}

Here's my header file as well:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico">

    <title>
        <?php bloginfo('name'); ?>
        <?php wp_title("|", true, "right "); ?>
    </title>

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo("url"); ?>"><?php bloginfo("name"); ?></a>
        </div>
       <div id="navbar" class="navbar-collapse collapse">

        <?php
            $args = array(
                "menu" => "header-menu",
                "menu_class" => "nav navbar-nav",
                "container" => "false"
            );
            wp_nav_menu($args);
        ?>

        </div><!--/.navbar-collapse -->
      </div>
    </nav>

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Sorry, I don't really use bootstrap, more or a bourbon guy, but if you are wondering why your nav is white I think it's because you have this code:

.current-menu-parent .current-menu-item a {
    color: #fff; //this is the color white
    font-weight: bold;
}

also where are these classes in your HTML? or are they in a php function?

you should always have the media query at the end of the mobile first layout. that may also cause some issues.

I wish I could be of more help, but like I said, I don't really use bootstrap.

jakepoulios
jakepoulios
404 Points
jakepoulios
jakepoulios
404 Points

Thanks for your quick response! The menu classes are in the HTML I attached with the original post. Unfortunately, that code that you included above controls the font for submenus. I think there's a larger underlying issue with the code. I'm just not sure what it is...