Alignment issue with bootstrap 4.0 fixed navbar

Question

I am trying to achieve to divide my navbar in two equal parts. In which the right side should be my menu and left side should be my icon and search bar. And on click the search bar it should extend to the rest of the half in left part. I have successfully use the fixed navabar. But I am facing issue in aligning my menu to the right side.

This is how it's look.

As you can see the menu is not completely right align. And after following the post on SO looks like float : right won't and didn't work. I am not sure how can I fix this. Here is my code:

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav">
                <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="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

In Elements in browser I tried setting with margin-right but these values are going in negative, which I don't think is right way to do. Also I am new to front end development and bootstrap framework which I am finding very confusing. So any help would be highly appreciated.

Ash · Answer 1 · 2018-04-08T05:36:20.437

ul.navbar-nav{
position:absolute;
right:0px;
}

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>


</head>

<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav">
                <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="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

</body>
</html>

It didn't help still the same result – Lokesh Pandey Apr 08 '18 at 05:22 — Lokesh Pandey, Apr 08 '18 at 05:22

score 0 · Answer 2 · answered Apr 08 '18 at 05:54

Alright - I had a similar problem not too long ago and the solution is using the built in bootstrap mr-auto and ml-auto classes on your uls. Though this would solve the problem, ideally you'd have an ul for every section of the navbar (i.e. a ul for the search and another for the links on the right)

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2 mr-auto">
        <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
        <div class="px-2">
            <form>
                <input type="text" name="search" placeholder="Search ...">
            </form>
        </div>
    </div>
    <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
        <ul class="navbar-nav ml-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="#/product">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/career">Career</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
            </li>
        </ul>
    </div>
</nav>

score 0 · Accepted Answer · answered Apr 08 '18 at 06:42

After following @ZimSystem's answer here, ml-auto push item to right in bootstrap 4 beta. Finally got this code working.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <img src="images/some_logo.png" class="img-rounded" alt="some_logo" style="height: 40px; width: 80px">
            <div class="px-2">
                <form>
                    <input type="text" name="search" placeholder="Search ...">              
                </form>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 order-4 order-md-0 dual-collapse2">
            <ul class="navbar-nav ml-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="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" onclick="openNav()" style="width: 60px; font-size: 25px; margin-top: -7px">&#9776;</a>
                </li>
            </ul>           
        </div>
    </nav>

Alignment issue with bootstrap 4.0 fixed navbar

3 Answers3