CODEWITHSUNDEEP
htmlcss
Ronnie Gurr
Ronnie Gurr

Reputation: 47

How to make a horizontal navigation bar

I'm trying to make a horizontal navigation bar with some items pulled to the left and others pulled to the right. When I try doing this with this code it is placing all the items in the top left corner of the screen can someone help? 

.nav li {
  display: inline;
}
<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
    <ul class="pull-right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Views: 160

Answers (6)

Brendan D&#39;Amore
Brendan D&#39;Amore

Reputation: 41

Another method you could try is to make both sides in individual divisions, and each displays as an inline-block. Then split them using margins. Set the out-facing margins to your preference, and the in-facing margins to 'auto', and it will naturally keep measure it out. So it would be this:

<div class="nav">
  <div class="container pull-left">
    <ul class="#">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
  </div>
  <div class="container pull-right">
    <ul class="#">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

I've given each it's own container and placed the pulling action (and class) to with the div instead of the list;

.nav {
    display: block;
    /*^This would be default^*/
    width: 100%
}

.pull-left {
    display: inline-block;
    margin: Apx auto Apx Bpx;
}

.pull-right {
    display: inline-block;
    margin: Apx Bpx Apx auto;
}

I like this better than positioning the list, as they've given me issues in the past; this also doesn't require float, which doesn't translate to older browsers, I've been told, though I'll never likely test such myself.

Also, when using this method, I would suggest you set this from the very beginning:

.body * {
  font-size: 0px;
}

.text { /*Class all CONTAINERS of
          text items this, just one
          level up, but not the
          text itself */
  font-size: 14px;
 }

This will take away any white-space issues, as I've had happen to me (typically this will be the left-leaning side being pushed down by an empty space, while the right will be pushed up that same amount, but from the bottom, so they will not be even horizontally. With this, those spaces are 0px instead. Just a suggestion.

Upvotes: 2

Piotr Retmańczyk
Piotr Retmańczyk

Reputation: 77

How about that?

    .nav li {
      display: inline;
      width:100%
      margin:1%;
    }
   a{
     text-decoration:none;
}
    .pull-left{
      float:left;     
    }
    .pull-right{
    float:right;
    }
<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
    <ul class="pull-right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

tho-masn
tho-masn

Reputation: 1174

You have set float attributes for the pull-left and pull-right classes. Also add a div after ul.pull-right to clear the floats, so that the element after the ul.pull-right won't float.

See here:

.nav li {
    display: inline;
}

.pull-left { /* added */
  float: left;
}
.pull-right { /* added */
  float: right;
}

.clear { /* added */
  clear: both;
}
<div class="nav">
    <div class="container">
        <ul class="pull-left">
            <li><a href="#">Home</a></li>
            <li><a href="#">How to</a></li>
        </ul>
        <ul class="pull-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Log In</a></li>
            <li><a href="#">Help</a></li>
        </ul>
      
        <div class="clear"></div> <!-- added -->

        <p>test</p>
    </div>
</div>

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

.nav li {
    display: inline;
}

.pull-left  { 
display: inline-block;

}
.pull-right  { 
display: inline-block;

}

DEMO HERE

Upvotes: 0

bulanmaster
bulanmaster

Reputation: 401

You might want to add the Bootstrap links to your project as follows:

.nav li {
  display: inline;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
    <ul class="pull-right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Mike Donkers
Mike Donkers

Reputation: 3699

You seem to be using Bootstrap and this problem occurs when you forget to add the bootstrap links.

Bootstrap links

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Adding this should solve your problem with the positioning.

.nav li {
  display: inline;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="nav">
  <div class="container">
    <ul class="pull-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
    <ul class="pull-right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

Alternitavely

You can also define the pull-left and pull-right in your custom CSS file like so:

.nav li {
    display: inline;
}
.pull-left { 
    float: left; 
}
.pull-right { 
    float: right; 
}

Which will also fix the problem.

Hope this helps!

Upvotes: 1

Related Questions