bootstrap navbar elements too much in the center

Question

I'm using bootstrap to build a navbar for my page, but am finding that the elements are too bunched towards the center, leaving a lot of extra space to the sides. Is there a way to extend these more to take advantage of the extra width of the page?

Here is my HTML/CSS. Basically took Example 6 from https://codepen.io/bootstrapped/pen/KwYGwq?editors=1100

HTML:

  <nav class="navbar navbar-inverse navbar-fixed-top example6">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
          <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 text-hide" href="/fedhr/Fed_Splash_New.do"/>
      </div>
      <div id="navbar6" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/fedhr/Fed_Splash_New.do"><span class="glyphicon glyphicon-home"></span></a></li>

          <li><a href="#Profile"><span class="glyphicon glyphicon-user"></span>$[SP] <g:no_escape>${jvar_user_name}</g:no_escape> <g:no_escape>${jvar_user_lastname}</g:no_escape></a></li>
          <li><a href="#Tasks"><span class="glyphicon glyphicon-list-alt"></span>$[SP] Tasks</a></li>
          <li><a href="#About"><span class="glyphicon glyphicon-plane"></span>$[SP] About Us</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-phone-alt"></span>$[SP] Contact Us <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="mailto:someone@example.com?Subject=Hello%20again">Email Us</a></li>
              <li><a href="/$chat_support.do?queueID=cd846e1747a102009eaff6df1d9a7175" target="_blank">Chat with HR</a></li>
            </ul>
          </li>
            <li><a href="../logout.do"><span class="glyphicon glyphicon-log-out"></span>$[SP] Logout</a></li>
        </ul>
      </div>
     </div>
  </nav>

CSS:

.example6 .navbar-brand{ 
  background: url(#) center / contain no-repeat;
  width: 200px;
}

Can you share the code as well ? – Ahmad hamza Oct 28 '16 at 20:46 — Ahmad hamza, Oct 28 '16 at 20:46
Did you wrap the bar in the class "container"? – Stephen C Oct 28 '16 at 20:46 — Stephen C, Oct 28 '16 at 20:46

score 0 · Answer 1 · edited Nov 12 '16 at 11:43

0

You can use the property margin-right inside the the .navbar-right class. But be aware that your <ul> will overflow the container parent class.

.navbar-right {
    float: right!important;
    margin-right: -20px;
}

edited Nov 12 '16 at 11:43

Mr Lister

45,515
15
108
150

answered Oct 28 '16 at 21:03

Yuri Pereira

1,945
17
24

score 0 · Answer 2 · answered Oct 28 '16 at 21:08

the <div class="container"> sets the width of the content inside to a fixed width that depends on the viewport width (see http://getbootstrap.com/css/#overview-container) . To let the content stretch to the full available width, change it into <div class="container-fluid">

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

Use <div class="container-fluid">, not <div class="container">.

This way it will adapt to the available width of the viewport.

bootstrap navbar elements too much in the center

4 Answers4