0

I've been trying to figure this out for hours. I'm not sure if it is an issue with Bootstrap 4 or there is something wrong with my syntax. When the Navbar collapses the next li is displaying to the right of the navbar-brand text, not under it like all of the other items.

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
            <div class="container">
              <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
                &#9776;
              </button>
              <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
                <div class="nav-item">
                  <a class="navbar-brand nav-link" href="#">IMGS</a>
                </div>

                <ul class="nav navbar-nav">

                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>

                <ul class="nav navbar-nav pull-sm-right">
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Sign Up</a>
                 </li> 
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Login</a>
                 </li>
                </ul>
              </div>
            </nav>

I've also adding a codepen http://codepen.io/NachoSupreme/pen/xEgwJz. Can anyone help?

NachoSupreme
  • 21
  • 7

1 Answers1

0

I'm assuming you didn't mean for the brand to wrap up inside of hamburger. This is the correct UI if you are asking me.

Try this

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<div class="container">
  <a class="navbar-brand nav-link" href="#">IMGS</a>
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <div class="nav-item">

    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>

    <ul class="nav navbar-nav pull-sm-right">
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Sign Up</a>
     </li> 
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Login</a>
     </li>
    </ul>
  </div>
</nav>
user2684452
  • 701
  • 2
  • 14
  • 31
  • I do want the brand to wrap up in the UI. I just want all of the li elements to fall directly under the brand in the collapse view. Currently, the "About" li element is horizontal to the brand, not vertical as the rest of the items. – NachoSupreme Sep 22 '16 at 01:13
  • Why do you want brand to wrap in hamburger? Bad UX. You want to hide the logo on mobile? – user2684452 Sep 22 '16 at 01:29
  • I agree with you it is bad branding. However, this is a project that I am working on and this is part of the requirements. – NachoSupreme Sep 22 '16 at 01:53