1

I've been trying to make my nav-items in my ul float right. I've tried many different things, including everything in this thorough answer: Bootstrap 4 align navbar item to the right

The nav item stays stuck left.

I feel, at this point, that I'm missing something obvious? The div class that wraps the list items are newly added, and don't seem to have any effect on how the list item behaves as far as I know. Everything I've tried has also been without those div tags, just for reference.

Curious whether anyone can see a problem here?

    .navbar-default {
      background-color: white;
    }
    
    .navbar {
      display: flex;
      min-height: 50px;
      border-bottom: 1px solid black;
      align-items: center;
      margin-bottom: 0;
    }
    
    
    .profile-dropdown {
      border-radius: 50%;
      height: 50px;
      width: 50px;
      border: 1px solid black;
      object-fit: cover;
    }
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    
      <a class="navbar-brand" href="#">Equilibrium</a>
    <!-- If the user is logged in, display a profile icon. -->
    
      <ul class="nav navbar-nav mr-auto">
    
     
          <li class="nav-item">
            <a>
              <img src="" class="profile-dropdown" alt="">
            </a>
          </li>
      
          <li class="nav-item" >
            <img src="/assets/glyphicons/user.png" class="profile-dropdown" alt="">
          </li>
   
    
      </ul>
    
    </nav>

I appreciate any help. Thanks.

sharedev
  • 389
  • 2
  • 6
  • 21
  • 1
    The HTML you posted there is incomplete. Also, post HTML output only without the Angular code. That makes troubleshooting and testing easier. – WebDevBooster Jan 21 '18 at 23:38
  • Hmm... you have an image with an empty source and a glyphicon icon. Are you sure that this is your actual code? Also, since you are using a glyphicon here, are you actually using Bootstrap 4? (BS4 doesn't come with glyphicons out of the box) – WebDevBooster Jan 22 '18 at 00:24
  • The `navbar-toggleable` class clearly confirms that is not BS4. So, please confirm that you do want a version for Bootstrap 4 and not for Bootstrap 3. – WebDevBooster Jan 22 '18 at 00:30
  • I removed the image source because it is an Angular data binding. The glyphicon is in my assets folder, which I added manually. – sharedev Jan 22 '18 at 00:32
  • Yeah I would prefer to conform to BS4. I didn't know navbar-toggleable was outdated. @WebDevBooster – sharedev Jan 22 '18 at 00:32
  • "removed the image source because it is an Angular data binding". Well, that's why I said, please post the OUTPUT. So, use some placeholder service or something to post some code that's actually testable. – WebDevBooster Jan 22 '18 at 00:34

2 Answers2

2

Your question says that you want to align items to right. For that, you have to add ml-auto instead of mr-auto. It will keep all items aligned to right.

Fathima Linsa K
  • 618
  • 6
  • 14
0

I'm posting an example here of a working navbar for Bootstrap 4. This should point you in the right direction. If you still have any questions, ask in the comments.

As you can see the mr-auto class works here perfectly. It pushes the content on the right to the other side. (mr-auto = "margin-right: auto")

Here's the working code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <a class="navbar-brand" href="#">
            <p><i class="fa fa-user" aria-hidden="true"></i></p>
        </a>
    </div>
</nav>

<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>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
  • P.S. Most of the SO posts on Bootstrap 4 that are older than a month are outdated. But the good news is: Now that the Bootstrap 4 final is out there won't be any breaking changes anymore. – WebDevBooster Jan 22 '18 at 00:49