CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3803747
user3803747

Reputation: 312

Make bootstrap navbar divider evenly spaced

How do we make the vertical dividers in the navigation bar evenly spaced out?

Here's the HTML and CSS i'm currently using.

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li>

CSS:

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

Navbar code:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
       </div>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li class="divider-vertical"><a href = "#">About</a></li>
            <li class="divider-vertical"><a href = "#">Jobs</a></li>
            <li class="divider-vertical"><a href = "#">Contact Us</a></li>
            <li class="divider-vertical"><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

Upvotes: 5

Views: 11050

Answers (3)

matthewelsom
matthewelsom

Reputation: 944

There are several ways to achieve the effect you are after. Here is a quick fix that will solve your issue and give you the result you need.

 .divider-vertical {
height: 50px;
margin: 0 0 0 9px;
padding: 0 0 0 9px;
border-left: 1px solid red;
}

A better approach which would save you a little html writing would be to do something like the following:

  1. Remove your .divider-vertical class from the HTML
  2. Style your .li elements, use margin and padding on the same side as your border - in this case the right
  3. we will use Pseudo class :last-child to remove some css attributes from the last menu item

li {
  border-right: 1px solid red;
  margin: 0 9px 0 0;
  padding: 0 9px 0 0;
}

li:last-child {
  border-right: none;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
       </div>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li><a href = "#">About</a></li>
            <li><a href = "#">Jobs</a></li>
            <li><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

Upvotes: 1

HelloWorld
HelloWorld

Reputation: 2330

You need to change your CSS to the following:

.divider-vertical {
    height: 50px;
    border-left: 1px solid #F2F2F2;
    border-right: 1px solid #FFF;
}

You had margin on the left and right set to 9px.

If you want the extra space use:

padding: 0 9px;

instead. here is a working example, but you will need to stretch the panel with the result to see it since bootstrap is making your nav into a navicon at jsfiddle's default width.

Upvotes: 1

Mark
Mark

Reputation: 564

Take a look at this. I added the divider-vertical class to the Home <li> tag to give it styling.

JSFiddle

HTML

  <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li class="divider-vertical"><a href = "#">Home</a></li>
        <li class="divider-vertical"><a href = "#">About</a></li>
        <li class="divider-vertical"><a href = "#">Jobs</a></li>
        <li class="divider-vertical"><a href = "#">Resources</a></li>
      </ul>
  </div>
</nav>

CSS

.divider-vertical {
    height: 50px;
    width:100px;
    margin: auto;
    border-left: 1px solid black;
    border-right: 1px solid red;
    text-align:center;
}

Upvotes: 1

Related Questions