CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Eugene Triguba
Eugene Triguba

Reputation: 82

My navigation bar is vertical but won't go horizontal

I've been having trouble making my navigation bar for some reason. I've tried looking at if anything here answers it or going online but have had no luck. Am I missing something or is there a conflict? 

 
    html, body {
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    
    .jumbotron {
      background: url(../img/bg.jpg) no-repeat center center;
      background-size: cover;
      height: 800px;
    }
    
    .header {
      background-color: #333;
    }
    
    .nav {
      list-style-type: none;
      margin: 0;
      padding: 20px 0;
    }
    
    .nav li a {
      color: #fff;
      display: inline;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      margin-right: 25px;
      text-transform: uppercase;
    }
    <div class="header">
      <div class="container">
        <ul class="nav" role="navigation">
		  <li><a href="#">About</a></li>
          <li><a href="#">Photography</a></li>
          <li><a href="#">Programming</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Reading</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

Upvotes: 5

Views: 6796

Answers (4)

Joey
Joey

Reputation: 1370

I made you a plunker as an example. You were very close. You just need to set the display property on the .nav li selector to inline-block.

.nav li {
  display:inline-block;
}

The poster was actually looking for a Bootstrap solution but didn't have the question tagged as such. Here is a Bootstrap example. It just uses the pull-left class on each li tag.

<ul class="nav" role="navigation">
    <li class="pull-left"><a href="#">About</a></li>
    <li class="pull-left"><a href="#">Photography</a></li>
    <li class="pull-left"><a href="#">Programming</a></li>
    <li class="pull-left"><a href="#">Writing</a></li>
    <li class="pull-left"><a href="#">Reading</a></li>
    <li class="pull-left"><a href="#">Contact</a></li>
</ul>

Upvotes: 3

n3a9
n3a9

Reputation: 21

Add the attribute .nav li with inline display.

.nav li{
   display: inline;
}

Upvotes: 0

byteSlayer
byteSlayer

Reputation: 2143

See the fixed code snippet bellow. You need to add display: inline; to the li elements to make them go horizontal.

    li {
      display: inline;
    }

    html, body {
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    
    .jumbotron {
      background: url(../img/bg.jpg) no-repeat center center;
      background-size: cover;
      height: 800px;
    }
    
    .header {
      background-color: #333;
    }
    
    .nav {
      list-style-type: none;
      margin: 0;
      padding: 20px 0;
    }
    
    .nav li a {
      color: #fff;
      display: inline;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      margin-right: 25px;
      text-transform: uppercase;
    }
    <div class="header">
      <div class="container">
        <ul class="nav" role="navigation">
		  <li><a href="#">About</a></li>
          <li><a href="#">Photography</a></li>
          <li><a href="#">Programming</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Reading</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

Upvotes: 0

Megan
Megan

Reputation: 11

In your CSS, try adding

.nav li {
 display: inline;
}

Your li elements are naturally block displayed, so this should go ahead and remove the breaks from in between them.

Upvotes: 0

Related Questions