How to keep navbar-brand Grouped with Links

Question

I have this code and cant figure out how to keep the navbar-brand together with the links.

    <nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler collapsed"
      type="button" data-toggle="collapse"
      data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse"
      id="navbarSupportedContent-5" style="">
        <ul class="navbar-nav m-auto">
          <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>
        </ul>
      </div>
    </nav>

The class nav-bar brand will not respond to "m-auto" or "text-align: center"

When I try to wrap them all in a div to center the whole group, it doesnt work and breaks the collapse button.

I can only find info on how to center the navbrand with links on either side but nothing about keeping the navbrand grouped with the links when centered.

I'd ideally like to create a fixed top navbar that has col-7 on left and col-5 on right, where each side is centered within its own column which is easy to do with divs, but this navbar css is not responding in the way I am used to.

Yes, its pretty complicated but even when I was running it with nothing but bootstrap, that navbar is tricky. Been messing around with and I think the only way is manually position absolute. There doesnt seem to be a way to make the navbar-brand stay with the links — weekapaug, Apr 22 '18 at 18:24

score 1 · Accepted Answer · answered Apr 23 '18 at 11:46

I'm not entirely sure what you're trying to achieve with the col-5 and col-7, but to group the navbar brand and nav items, wrap both in a single div and use the flexbox util classes to center...

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

keep navbar-brand grouped with links

<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
    <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
            <ul class="navbar-nav align-items-center">
                <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>
            </ul>
        </div>
    </div>
</nav>

Note: There is no m-auto class. Use mx-auto for horizontal (x-axis) auto margins to center.

Related:
Center an element in Bootstrap 4 Navbar

score 0 · Answer 2 · edited Apr 23 '18 at 08:22

In order to have all the nav items together one the left side, remove the m-auto class from navbar-nav list.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>


<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
    <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>
    </ul>
  </div>
</nav>

Check this pen on codepen

To align all the items at the center of the page, follow these three steps.

Override the flex-grow property of navbar-collapse. At the moment, it is flex-grow: 1.

.flex-grow-zero {
  flex-grow: 0 !important;
}

Use the justify-content-center class to override justify-content:space-between property of navbar. As you may know, it aligns the content of a flex element at its center.
Remove the m-auto class from navbar-nav list.

.flex-grow-zero {
  flex-grow: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top justify-content-center">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="navbar-collapse collapse flex-grow-zero" id="navbarSupportedContent-5" style="">
    <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>
    </ul>
  </div>
</nav>

Check this pen on Codepen

How to keep navbar-brand Grouped with Links

2 Answers2

Remember to use the latest version of Bootstrap.