Can't get aligned right nav items with Bootstrap 4 to appear in responsive view

user_13278839 0
Viewed 33

I've been trying to figure this out for a while now. I'm a bit of a noob when it comes to Bootstrap, so please allow me the probably simple question. I'm trying to create a navbar with bootstrap 4, with the majority of menu items on the left, but with the login button on the right. I've figured some roundabout way of doing it (which could be wrong) but whenever I view the page in phone or tablet view, the 'login' item of the menu doesn't appear when one clicks the burger menu icon. It appears up to a point (think it's about 760px) and then just disappears from view. Here's the markup to this point, any help at all would be appreciated. 

        <a class="navbar-brand" href="#"><img src="imgs/branding/nerve logo_small.png" width="50" height="50" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <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="index.php">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 4</a>
              </li>
            </ul> 
            </div>
           <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 
                <li class="nav-item text-right">
                    <a class="nav-link " href="#">Login</a>
                </li>
            </ul>
        </nav>
bootstrap-4 css html
1 Answers

I think, the problem is here

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 
                <li class="nav-item text-right">
                    <a class="nav-link " href="#">Login</a>
                </li>
            </ul>

d-none d-md-flex - this part means, that this element will be hidden (d-none) until 768px (d-md-flex), and then will be displayed as flex. Try to remove d-none

UPDATED

The best way is to remove a standalone login ul and add Login as a part of a global ul list. 

<ul class="navbar-nav w-100">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 4</a>
    </li>
    <li class="nav-item flex-sm-grow-1 text-sm-right">
        <a class="nav-link " href="#">Login</a>
    </li>
  </ul>

Look closer to flex-sm-grow-1 text-sm-right in Login li. And don't forget to add w-100 to ul.

user_31871270
Related