Fill the page horizontaly with a menu

Question

So, I have this menu:

What can I do to the menu fill horizontally the entire page? Am I using the wrong bootstrap classes? It just fills a part of the page. Can someone teach me what to do here?

ul {
  list-style-type: none;
  border-bottom-style: solid;
  border-bottom-color: green;
  position: relative;
}
li {
  display: inline;
  padding: 30px;
}
#menu a {
  color: black;
}
#menu a:hover {
  color: green;
  font-weight: 700;
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-color: green;
  border-bottom-width: 6px;
  border-radius: 4px;
}

<body>
  <section>
    <div class="navbar navbar-default" role="navigation">
      <div class="container-fluid wrapper">
        <div class="navbar-header">
          <ul id="menu">
            <div class="row">
              <div class="col-md-12">
                <li><img src="Imagens/Logo.png"></li>
                <li id="menu1"><a href="#">About us</a></li>
                <li><a href="#"> Act</a></li>
                <li><a href="#"> News</a></li>
                <li><a href="#"> Videos</a></li>
                <li><a href="#"> Contact us</a></li>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </section>
</body>

score 1 · Answer 1 · answered Oct 01 '17 at 20:30

Im not an expert at bootstrap and I don't know for what the class is used to do but if I remove the div-element: <div class="navbar-header"></div> it worked in my Chromium.

With Chromes Developer Tools you are able to find bugs like this (Ctrl+Shift+I or Ctrl+Shift+C to use the Element Inspector directly)

Maybe you could add style="text-align: justify"; on the wrapping div around your <li> tags to set the spaces between the menu entry's dynamically.

Hope it would help you.

score 0 · Accepted Answer · answered Oct 01 '17 at 20:27

You can set the width of navbar-header to 100% with the below code to make the varbar cover the full length horizontally however it's not going to perfect functional navbar.

.navbar-header{
  width:100%
  }

The reason being, it does look like this is possibly a Bootstrap 3 navbar that you're trying to use with bootstrap 4 which is why it's not working. The classes are different between BS3 and BS4.

Check http://getbootstrap.com/docs/4.0/examples/navbars/ for examples for how to implement a bootstrap 4 navbar.

Fill the page horizontaly with a menu

2 Answers2