How to move navbar items at the right

Question

I'm using bootstrap classes and I need the logo to be in the left but nav items at the right. To be responsive as well.

https://i.stack.imgur.com/yvLvo.jpg navbar now

       <!-- Logo -->
       <a class="navbar-brand" href="#">
           <img class="img-fluid" src="images/header-logo.png" alt="logo">
       </a>

       <!-- Toggler/collapsibe Button -->
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
           <span class="navbar-toggler-icon"></span>
       </button>

       <!-- Nav items -->
       <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
           <ul class="navbar-nav">
               <li class="nav-item">
                   <a class="nav-link" href="#">Home</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Products</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Services</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Contact</a>
               </li>
           </ul>
       </div>
   </nav>

Please edit this in your question – Techie_T Apr 10 '19 at 10:34 — Techie_T, Apr 10 '19 at 10:34

score 0 · Accepted Answer · answered Apr 10 '19 at 10:41

0

You can add ml-auto to your ul class, which gives your ul a margin-left of auto. It will look like this:

<ul class="navbar-nav ml-auto">

answered Apr 10 '19 at 10:41

Corné

1,304
3
13
32

1

So mark this answer as accepted. – Chris P Apr 10 '19 at 10:48

score 0 · Answer 2 · answered Apr 10 '19 at 10:43

0

You can use float right to move nav bar right side

#collapsibleNavbar{
 float: right;
 margin: 0 10px 0 0;
}

answered Apr 10 '19 at 10:43

Sethuraman

654
6
15

score 0 · Answer 3 · edited Apr 19 '19 at 05:45

You can try this:

// CSS code
nav #collapsibleNavbar{
    width: n%; // n = o que achar melhor
    margin: n n;
    display: block;
}
nav #collapsibleNavbar .navbar-nav{
    display: block;
    width: auto; // or what You think is better for your project
    margin: n n;
    float: right;
}

I think you can try that and to encapsulate in a div your Logo and Toggler/collapsibe Button, setting div to float left. Maybe you'll need add some "!important".

How to move navbar items at the right

3 Answers3