CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
koder
koder

Reputation: 43

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>

Upvotes: 1

Views: 910

Answers (2)

warch
warch

Reputation: 2579

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>

Upvotes: 1

GvM
GvM

Reputation: 1733





        <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">
            <a class="navbar-brand" href="#">Brand</a>
            <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>    
          </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>

    <style>
    .navbar-header {
    float: none;
    text-align:center;
    }
    .navbar-brand {
display: inline-block;
float: none;
}
.navbar-collapse {
display: inline-block !important;
text-align:center;
width: 100%;
}
.navbar-nav.navbar-left, .navbar-nav.navbar-right {
float:none !important;
display:inline-block;
}
    </style>

Upvotes: 1

Related Questions