CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5096599
user5096599

Reputation:

Using bootstrap navigation bar and would like to center the links using css

I am using the bootstrap navigation bar and I have my links in the nav. The links default to the left. The only way I am able to move the links to the center of the page is by making the css give the first list item a margin of 20em. I would like to have it adjust for different size monitors however so in the event the monitor is larger it will still be centered. Here is the portion of the bootstrap nav code with my links and the css below it:

<nav class="navbar navbar-default">
    <!--<div class="container">-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
        <a class="navbar-brand" href="#">Chompsta</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="margin-left"><a href="#">Chat anonymously</a></li>
          <li><a href="#">Register for fame</a></li>
          <li><a href="#">Search for topics</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><div id="points">172</div></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    <!--</div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
  </nav>

***
css

.margin-left { margin-left: 20em; }

Upvotes: 0

Views: 240

Answers (1)

vanburen
vanburen

Reputation: 21653

This might solve your problem or get you headed in the right direction. This will center your main navbar links and keep your navbar-right in it's position.

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <!--<div class="container">-->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> <a class="navbar-brand" href="#">Chompsta</a>

  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="margin-left"><a href="#">Chat anonymously</a>

      </li>
      <li><a href="#">Register for fame</a>

      </li>
      <li><a href="#">Search for topics</a>

      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="#">
          <div id="points">172</div>
        </a>

      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  <!--</div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
</nav>

Upvotes: 1

Related Questions