Boostrap menu fill the width - Twitter bootstrap

Serge
August 29, 2017
107 views
3 votes
4 Answers

I need that the menu fills-in the width of its container instead of be left-aligned.

[LOGO A|B|C            ]
[LOGO   A  |  B  |  C  ]

Here is my test code. My question is how to achieve it using bootstrap.

.navbar-brand{width: 405px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answers

You need so set the .navbar-nav to float: right;, like this:

.navbar-nav {
  float: right !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>

You can use flex-box

.navbar-brand {
  width: 405px;
}

@media screen and (min-width:768px) {
  .navbar>.container-fluid {
    display: flex;
  }
  ul.nav.navbar-nav {
    flex: 1 1;
    display: flex;
  }
  .navbar-nav>li {
    flex: 1 1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Do you need something like this?

.navbar-nav {
  display: flex;
    width: 100%;
    justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
     
    <ul class="nav navbar-nav table-responsive">
    <li class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>
    </li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Do you want something like this?

.navbar-header {width: 160px;}
.navbar-nav.table-responsive {
   width: calc(100% - 160px);
   border: 0;
   margin-left: 0;
   margin-right: 0;
   display: flex;
   flex-wrap: wrap;
}
.navbar-nav > li {
   float: left;
   flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav pull-left table-responsive">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

Boostrap menu fill the width – Twitter bootstrap

Answers