Step 2: The navbar won't appear inline


#1

For some reason the navbar won't appear inline even when using the hint in the project. Even if I replicate the code in the actual end result website. The real time viewer never displays the navbar inline.

Additionally, setting the first li item to class="active" doesn't display that item in the active state in the navbar. Something is wrong.

Here's the html and css I'm using:

<div class="menu">
  <div class="container">
    <ul class="nav">
      <li><a href="" class="active">Top Stories</a></li>
      <li><a href="">World</a></li>
      <li><a href="">Business</a></li>
      <li><a href="">Technology</a></li>
      <li><a href="">Entertainment</a></li>
      <li><a href="">Sports</a></li>
      <li><a href="">Science</a></li>
      <li><a href="">Health</a></li>
    </ul>
  </div>
</div>

.nav {
display: inline;
}


#2

Hi Adam,

Could you please post a screenshot of what you're seeing?

Thanks :slight_smile:


#3

Hi ajax,

I had the same issue. Try this in your css:

.menu li {
  display:inline-block;
}

.menu li.active {
  background-color:#1A77FF;
}

#4

Displaying the line items as an inline block has worked, thanks jozadad1.

However, the active state still isn't responding, even your css selectors aren't getting a respond.

(My search button looks like that on purpose, identifying a button via only an underline is bad UX).


#5

@ajaxplayer44864 I think Bootstrap may be overriding your .active CSS rule. Try something more specific, like:

.menu .container .nav > li.active {
  /* ... */
}

Then, if that works, remove specificity slowly, like removing .container from the selector, then change .nav > li to .nav li, and see how little specificity you can use to override Bootstrap.