Navbar li elements not floating to right?

Question

I need a help to make my li elements float to the right of navbar.

<nav class="navbar navbar-toggleable-md navbar-fixed-top topnav" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#" target="_blank" id="heading">Samrat Luitel</a>
  </div>
  <div>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">About Us</a></li>
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">Contact Us</a></li>
    </ul>
  </div>
</nav>

Are your li elements the same width as the ul parent element? — Alex, Nov 14 '17 at 16:29

Dhaval Jardosh · Accepted Answer · 2017-11-14T17:00:18.170

1

How about using Grids in this scenario

You give grid of col-4 to you List Item and Grid col-8 to your Brand Name.

In that way you will be able to achieve what you are looking for.

And a little bit of CSS styling will make it better.

.navbar-right{
  float:right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-md navbar-fixed-top topnav col-12" role="navigation">
  <div class="navbar-header col-8">
    <a class="navbar-brand" href="#" target="_blank" id="heading">Samrat Luitel</a>
  </div>
  <div class="col-4">
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">About Us</a></li>
      <li class="nav-item"><a href="#home" style="color:black" class="nav-link">Contact Us</a></li>
    </ul>
  </div>
</nav>

edited Nov 14 '17 at 17:00

answered Nov 14 '17 at 16:32

Dhaval Jardosh

7,151
5
27
69

isn't it on the right side of navbar? If it's not what you are expecting, please show us a picture of what you are looking for. – Dhaval Jardosh Nov 14 '17 at 16:39
they are on left with the navbar-brand – Samrat Luitel Nov 14 '17 at 16:40
@SamratLuitel, please check the edit. This will work. – Dhaval Jardosh Nov 14 '17 at 16:54
It is working much better but not sticking to corner – Samrat Luitel Nov 14 '17 at 16:57
Well, now it is. Please check. – Dhaval Jardosh Nov 14 '17 at 17:00
Thanks but why earlier just putting the class navbar-right it was not working – Samrat Luitel Nov 14 '17 at 17:02
It's because, in `Bootstrap 4` `nav` is using Flexbox. Better explained [here](https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right) – Dhaval Jardosh Nov 14 '17 at 17:07

score -1 · Answer 2 · answered Nov 14 '17 at 16:32

-1

Where are your classes coming from? Easiest way to force them to float right would be to define it in an external style sheet or in the HTML document. To do it in HTML all you need to do is:

    <style>
    .navbar-nav>li {
        float: right;
    }
    </style>

answered Nov 14 '17 at 16:32

Harry Jones

24
3

I'll have a look, if you use inspect element and select the `li`'s then look on the right (on chrome) you can see where the styles are coming from. To test it on different areas at the top of the style column type `float: right` and see if it changes anything – Harry Jones Nov 14 '17 at 16:42
does tether absent causes error. I found that on console – Samrat Luitel Nov 14 '17 at 16:46

Navbar li elements not floating to right?

2 Answers2