Full length navbar

Question

I want my navbar to span the entire width like this www.ramenchicago.com but right now i can only get it all on the right.

I have my css set up like this

.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    
}

li {
    border-left: solid 1px white;
}

li:hover {
    background: rgba(0,0,0,0.3);
}

#navbar {
    display: table-row;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
            <div class="container">

                <nav class="navbar navbar-inverse navbar-static-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <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 id="navbar" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">HOME</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">LOCATION</a></li>
                                        <li><a href="#">PRESS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#contact">STRINGS 1</a></li>
                                <li><a href="#contact">STRINGS 2</a></li>
                                <li><a href="#contact">HELL RAMEN</a></li>
                                <li><a href="#contact">JOBS</a></li>
                                <li><a href="#contact">DARK CHEFS</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </div>
        </div>

Should I change my ul or li? Please help me out! Also, it's my first time using Bootstrap so I'm not familiar with it yet. How do I remove the little arrow on the dropdown menu?

Thanks!

Have a look at this: http://stackoverflow.com/questions/13085962/twitter-bootstrap-full-width-navbar — MrHaze, Apr 12 '16 at 03:17

score 0 · Answer 1 · answered Apr 12 '16 at 04:08

Set ul width to 100%

.navbar-nav {
        float: left;
        margin: 0;
        width: 100%;
    }

and it's li as 100% divide by number of li it has. You have 7 li, So it will be width: 14%; like this

.navbar-nav>li {
        float: left;
        text-align: center;
        width: 14%; /* 100 divide by 7 li = 14 */
    }

For the arrow on dropdown, Just remove <span class="caret"></span> there.

.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    
}

.navbar-nav {
    float: left;
    margin: 0;
    width: 100%;
}

.navbar-nav>li {
    float: left;
    text-align: center;
    width: 14%; /* 100 divide by 7 li = 14 */
}

li {
    border-left: solid 1px white;
}

li:first-child{
   border: 0; 
}

li:hover {
    background: rgba(0,0,0,0.3);
}

#navbar {
    display: table-row;
}

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
            <div class="container">

                <nav class="navbar navbar-inverse navbar-static-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <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 id="navbar" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">HOME</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">LOCATION</a></li>
                                        <li><a href="#">PRESS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#contact">STRINGS 1</a></li>
                                <li><a href="#contact">STRINGS 2</a></li>
                                <li><a href="#contact">HELL RAMEN</a></li>
                                <li><a href="#contact">JOBS</a></li>
                                <li><a href="#contact">DARK CHEFS</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </div>
        </div>

score 0 · Answer 2 · answered Apr 12 '16 at 16:55

You shouldn't need to nest containers and if you change your display properties to a table format you should see the results you're looking for.

.navbar-nav {
  display: table;
  width: 100%;
}
.navbar-nav > li {
  display: table-cell;
  float: none;
}
.navbar-nav > li > a {
  text-align: center;
}

*Note: I would place these inside a media query so it doesn't disturb your mobile navigation.

See working examples.

Full width of the browser

@media (min-width: 768px) {
  .navbar-wrapper .container-fluid {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}
.navbar-wrapper .navbar {
  background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
  border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
  background: rgba(0, 0, 0, 0.3);
}

<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" />
<div class="navbar-wrapper">

  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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 id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">HOME</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">LOCATION</a>
              </li>
              <li><a href="#">PRESS</a>
              </li>
            </ul>
          </li>
          <li><a href="#contact">STRINGS 1</a>
          </li>
          <li><a href="#contact">STRINGS 2</a>
          </li>
          <li><a href="#contact">HELL RAMEN</a>
          </li>
          <li><a href="#contact">JOBS</a>
          </li>
          <li><a href="#contact">DARK CHEFS</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</div>

Alternative: Full width of a container

@media (min-width: 768px) {
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar-wrapper .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}
.navbar-wrapper .navbar {
  background-color: rgba(0, 0, 0, 0.8);
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li {
  border-left: solid 1px white;
}
.navbar-wrapper .navbar.navbar-inverse .navbar-nav > li:hover {
  background: rgba(0, 0, 0, 0.3);
}

<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" />
<div class="navbar-wrapper">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-static-top">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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 id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">HOME</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">LOCATION</a>
              </li>
              <li><a href="#">PRESS</a>
              </li>
            </ul>
          </li>
          <li><a href="#contact">STRINGS 1</a>
          </li>
          <li><a href="#contact">STRINGS 2</a>
          </li>
          <li><a href="#contact">HELL RAMEN</a>
          </li>
          <li><a href="#contact">JOBS</a>
          </li>
          <li><a href="#contact">DARK CHEFS</a>
          </li>
        </ul>
      </div>

    </nav>
  </div>
</div>

Full length navbar

2 Answers2