CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jinu George
Jinu George

Reputation: 19

How do I center the navbar elements?

How can I bring the navigation bar elements to the center using Bootstrap?

HTML

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
          <div>
              <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>
           </div>
    </nav> 
</body>

This is the whole code I'm working on in JSFiddle.

Upvotes: 0

Views: 15079

Answers (6)

jpostdesign
jpostdesign

Reputation: 2598

Not sure of the ask, but do you want the navbar list items centered in a single row, like below?

enter image description here

To do so, make the rule for the ul li list more specific, and change the display to inline-block, like so:

.navbar-fixed-top ul li{
display:inline-block;
color:#808080 !important;
}

What it does is override the default .navbar and .navbar-fixed-top ui li properties in the core Bootstrap. Without the .navbar-fixed-top added, the default core Bootstrap CSS is more specific, and thus is a higher priority.

JS Fiddle Updated

Upvotes: 0

vanburen
vanburen

Reputation: 21653

Here are two examples that might help you. One distributes the links evenly across the container and the other centers the ul.

Example 1

.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: red;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Example 2

.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: red;
}
.navbar.navbar-inverse .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar.navbar-inverse .navbar-collapse {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

James Snowy
James Snowy

Reputation: 415

Could work with display: inline; and then just set a padding-right to it.

Upvotes: 0

zer00ne
zer00ne

Reputation: 43860

https://jsfiddle.net/zer00ne/y8qweyqv/

body {
  position: relative;
  height: 100vh;
  width: 100vw;
}
.navbar {
  background-color: #000000;
  position: absolute;
  top: calc(50% - 3em);
  border: 3px ridge red;
  border-radius: 12px;
  height: 6em;
  margin: 0 auto;
  width: 100%;
  
}
.linx {
  display: table;
  color: #808080;
  list-style-type: none;
  text-align: center;
  width: 100%;
  overflow: hidden;
  padding: 1.5em .25em;
  
}
.linx > li {
  display: table-cell;
  color: #808080 !important;
  vertical-align: middle;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}
a {
  color: #FFF  !important;
}
a:hover {
  color: red !important;
  text-decoration: none !important;
  outline: 3px solid red;
}
.whole{
    opacity:0.5;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:-1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar " role="navigation">
    <div>
      <ul class="linx">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>


</body>

Upvotes: 0

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

Here is Your markup and css for navbar elements.

Jsfiddle

HTML:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
       <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                 <ul class="nav">
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Portfolio</a></li>
                   <li><a href="#">Contact</a></li>
                 </ul>
            </div><!--/.nav-collapse -->
       </div><!-- container -->
  </div><!-- navbar-inner -->
</div><!--  navbar navbar-fixed-top -->

CSS:

 .navbar .nav, .navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
 }

 .navbar-inner {
 text-align:center;
}

Upvotes: 1

Mathews Mathai
Mathews Mathai

Reputation: 1707

<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation" align="center">

Add the align attribute to the "nav" tag and give it the value "center".

Upvotes: 1

Related Questions