Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 200
Eugene Triguba Avatar asked Oct 19 '22 06:10

Eugene Triguba


1 Answers

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>
like image 111
Joseph Evans Avatar answered Oct 21 '22 01:10

Joseph Evans