Bootstrap 4 Navbar align logo center and toggle icon on the left

Question

i want to make the logo centered and links on the left side in the navbar and when they collapse in small devices the toggle button should appear in the left side,here appears on the right side and the logo should be fixed(no collapse)

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <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 disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Carol Skelly · Accepted Answer · 2018-06-18T22:01:20.207

5

The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <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 disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100 order-0">
        <div class="w-100">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <a class="navbar-brand text-center w-100" href="#">Navbar</a>
        <span class="w-100"></span>
    </div>
    <span class="w-100"></span>
</nav>

Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi

Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items

edited Jun 18 '18 at 22:01

answered Jun 18 '18 at 14:50

Carol Skelly

351,302
90
710
624

it fixes the small devices issue but in the medium and large device the logo still in the left it is not centered. – Md Faysal Ahmed Akash Jun 18 '18 at 15:02
i think i couldn't make the question clear for you...the logo always should be in the center no matter what the display size is – Md Faysal Ahmed Akash Jun 18 '18 at 15:14
watched the output in codeply it was exactly what i wanted but doesn't work in my browser(chrome) – Md Faysal Ahmed Akash Jun 18 '18 at 18:24
that answer was using css.have you tried running your code in chrome? – Md Faysal Ahmed Akash Jun 18 '18 at 19:02
I already posted the working code and example. The question is basically a dup of the many other [navbar centering questions](https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024) – Carol Skelly Jun 18 '18 at 22:02
finally found what i wanted! – Md Faysal Ahmed Akash Jun 18 '18 at 22:38

Matt · Answer 2 · 2018-06-18T16:06:10.833

1

Sure, sorry about that, I should have added it earlier. So basically what we are doing is moving the .navbar-brand to the middle giving it the parameter of 0 auto, and adjusting the .navbar-collapse (so the items of our menu) to the left, giving 10px space from the top of the nav. Then with a media query, which will start to work only at 767px, we cetralize the .navbar-brand, so it will be always in the middle, we now adjust the .navbar-toggler (menu icon) as we did erlier with the menu items, whic now are getting the default position giving them the following style: position: inherit; then I have also modified the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint

.navbar-brand {
 margin: 0 auto;
}
.navbar-collapse {
 position: absolute;
 top: 10px;
}

@media (max-width: 767px) {
.navbar-brand {
 text-align: center;
}
.navbar-toggler {
 position: absolute;
 top: 10px;
}
.navbar-collapse {
 position: inherit;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
      <li class="nav-item"> <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 disabled" href="#">Disabled</a> </li>
    </ul>
  </div>
</nav>

edited Jun 18 '18 at 16:06

answered Jun 18 '18 at 15:25

Matt

492
3
15

thnx a bunch.it worked.can u give me any explanation so that i can understand the code? – Md Faysal Ahmed Akash Jun 18 '18 at 15:34
@MdFaysalAhmedAkash, please let me know if it is not clear and please accept my apologies if my English is not so good. – Matt Jun 18 '18 at 16:07
@MdFaysalAhmedAkash, I am sorry about that, please let me know which part is not too clear and I will do my best to explain it better – Matt Jun 18 '18 at 16:35
position:absolute and position:inherit – Md Faysal Ahmed Akash Jun 18 '18 at 18:17
with your answer i couldn't add the links on both left and right side.it appears only in left side why? – Md Faysal Ahmed Akash Jun 18 '18 at 19:32
Regarding the postion property, I guess the following link could be much better than my explanation: [w3schools] (https://www.w3schools.com/css/css_positioning.asp) and [w3schools] (https://www.w3schools.com/cssref/pr_class_position.asp) – Matt Jun 18 '18 at 19:56
What do you mean with: "...I couldn't add the links on both left and right side.it appears only in left side why?" – Matt Jun 18 '18 at 20:01
i am wanting to add nav-item links on both the left and right side of the logo – Md Faysal Ahmed Akash Jun 18 '18 at 20:11
you mean having something like two menu, one on the left and one on the right? – Matt Jun 18 '18 at 20:17
yes!! and two collapse button for two menu,one button on left and one on right – Md Faysal Ahmed Akash Jun 18 '18 at 20:19
I guess it could be possible, but for sure not just adding a navbar-nav like that – Matt Jun 18 '18 at 21:15

Bootstrap 4 Navbar align logo center and toggle icon on the left

2 Answers2

Linked

Related