koder koder - 1 month ago 15
CSS Question

Bootstrap navbar links and nav brand centered

enter image description hereI would like to be my navigation structure the nav brand image(logo) should be center top, after that my navigation should be center aligned.
Simply brand logo and nav bar links should be center but both should be different lines and sticky. Tried in below way But I am unable to get it.



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>





Answer

Is this what you wanted?

@media (min-width: 768px) {
  .navbar-nav.navbar-center, .navbar-header-center {
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header navbar-header-center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>    
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="clearfix"></div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-center">
           <li><a href="#">Left</a></li>
           <li><a href="#about">Left</a></li>
          <li><a href="#about">Right</a></li>
          <li><a href="#contact">Right</a></li>
        </ul>
      </div>
    </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Comments