How to Fix bootstrap navigation toggle button in center

Question

I have a problem in bootstrap 4 navigation, I want to set left Logo/Brand and center Navigation button and right login/My Account button, I have tried to solve this, but when I click navigation button on mobile it suddenly goes to the right, Please look at codeplay http://codeply.com/go/8FOVzFRkfM

<nav class="navbar navbar-expand-md navbar-light" >
    <div class="container"> <a class="navbar-brand text-primary" href="#">
        <i class="fa d-inline fa-lg fa-stop-circle"></i>
        <b> BRAND</b>
      </a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar4">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
        </ul> 
      </div>
      <span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
    </div>

  </nav>

score 0 · Answer 1 · answered Mar 23 '19 at 08:43

0

The container inside the navbar is a flex having justify-content: space-between, Hence navbar-collpase which is initially hidden gets displayed on toggle gets pushed below.

Solution: Making the navbar-collpase positioned absolute to the navbar will fix the problem.

Example:

@media only screen and (max-width: 600px) {
  .navbar-collapse{
        position: absolute;
        width: 100%;
        top: 56px; /*height of navbar in mobile*/
    }
}

answered Mar 23 '19 at 08:43

Vishnu Baliga

413
6
13

Thanks, sir but I want when I decrease or increase window tab then toggle button automatic appear in the center and navigation link should be center like essayshar.com navigation, I have tried this code on codeplay website please check it my code https://www.codeply.com/go/8FOVzFRkfM – Abdulrauf Mar 23 '19 at 09:03
if you want the navigation links also to be centered, add this class too `.navbar-light .navbar-nav .nav-link { text-align: center; }` – Vishnu Baliga Mar 23 '19 at 09:20
Sir I want look like essayshark.com navigation same in bootstraps – Abdulrauf Mar 23 '19 at 10:00

Carol Skelly · Accepted Answer · 2019-03-25T10:14:06.843

You just need to use on order-md-0 order-last the navbarcollapse so that it is positioned last on mobile screen widths (when the Navbar is collapsed)...

 <div class="collapse navbar-collapse order-md-0 order-last" id="navbar4">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
    </ul> 
 </div>

https://www.codeply.com/go/KkYoATqtFy

Related: Bootstrap NavBar with left, center or right aligned items

How to Fix bootstrap navigation toggle button in center

2 Answers2