CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hellomoto
hellomoto

Reputation: 483

navbar-right is not working on list

I'm new to bootstrap and in my application I want to have a navbar at the top of the page. The navbar should contain the brand name and then to the right of it it should have some options. But whenever I use navbar-right it doesn't work and the page I get looks like this

As you can see everything is squashed together with the brand name on the left hand side. What I have tried to fix this is by using pull-right which does work perfectly but I want to know why navbar-right isn't.

homeTemplate.html

<body>
<nav class="navbar navbar-default">
    <div class="navbar-inner">
       <div class="container-fluid"> 
           <div class="navbar-header">
               <a href="#" class="navbar-brand">MyApp</a>
           </div> 
           <ul class="nav navbar-nav navbar-right">
               <li><a href="#">Profile</a></li>
               <li><a href="#">Notifications</a></li>
               <li><a href="#">Messages</a></li>
               <li><a href="#">Options</a></li>
           </ul>
       </div>
   </div>
</nav>
</body>

Upvotes: 6

Views: 13215

Answers (4)

Tom Rutchik
Tom Rutchik

Reputation: 1702

navbar-right did not work for me! I'm using a bootstrap.css v5.3.3. When I looked into the bootstrap.css file I did not find navbar-right class. I'm going to guess that navbar-right is no longer supported in v5 of bootstrap.css, but I'm just a novice in using bootstrap.css, so maybe there's another explanation. What I had to do to get the navbar to go to the right was to add the class "justify-content-end" class to the "ul" tag that I wanted on the right. I'll go ahead and show you my menu which consists of a brand logo, a left menu part and a right menu part. (Please be aware that the navbar collapse and toggler portion isn't working as I expected it to! - but that a different issue)

<nav class="top-row ps-3 navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggler">
       <a class="navbar-brand" href=""><span class="logo"/><span class="masthead brandon-medium">My Navbar</span></a>
       <ul class="navbar-nav me-auto mb-2 mb-lg-0 menu-left">
           <li  class="navbar-item">
                <NavLink class="nav-link" href="/about">
                    <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> About
                </NavLink>
            </li>
           <li  class="navbar-item">
                <NavLink class="nav-link" href="counter">
                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Recognition
                </NavLink>
            </li>
       </ul>
        <AuthorizeView>
           <Authorized>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end">
                    <li>
                        <form action="Account/Logout" method="post">
                            <AntiforgeryToken />
                            <input type="hidden" name="ReturnUrl" value="@currentUrl" />
                            <button type="submit" class="nav-link">
                                <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
                            </button>
                        </form>
                    </li>
                </ul>
            </Authorized>

           <NotAuthorized>
              <div class="justify-content-end">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end">
                    <NavLink class="nav-link" href="Account/Login">
                        <span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
                    </NavLink>
                </ul>
                </div>
           </NotAuthorized>
        </AuthorizeView>

    </div>
</div>

In bootstrap.css, justify-content-end is defined as:

.justify-content-end {
   justify-content: flex-end !important;
 }

I'm not a expert in bootstrap.css and css in general for that matter, but I believe that you must be in a container the has already applied "display: flex" for "justify-content: flex-end" to work. The nav and navbar-nav both apply "display: flex". If you not familiar with the NavLink tag it's similar to the html anchor tag which has to do with client-side routing and dynamic links.

Upvotes: 0

SANGEETH SUBRAMONIAM
SANGEETH SUBRAMONIAM

Reputation: 1074

Try using two Unordered-Lists, one for the nav-brand and the elements you require to be aligned left and then use separate unordered-lists with the "nav navbar-nav navbar-right" class to get the right aligned elements. Check the snippet below.

   <nav class="navbar navbar-default navbar-static-top">
        <div class="topnav">
            <ul class = "nav navbar-nav">
                <li><a class="navbar-brand bigbrand" href="{% url 'urls' %}">BRAND name</a></li>       
                <li><a class="navbar-link" href="{% url 'urls' %}">Home</a></li>
                <li><a class = "navbar-link" href="urls">News</a></li>
                <li><a class = "navbar-link" href="urls">Contact</a></li>
                <li><a class = "navbar-link" href="{% url 'urls' %}">test</a></li>
            </ul>
            <ul class = "nav navbar-nav navbar-right">
                <li><a href="{% url 'url:logout' %}">logout</a></li>
            </ul>
       </div>
</nav>

Upvotes: 0

Saurabh Shukla
Saurabh Shukla

Reputation: 558

There might be a version issue. For Bootstrap version 4, Use <ul class="nav navbar-nav ml-auto"> for moving element to the right.

Upvotes: 3

Ajay Malhotra
Ajay Malhotra

Reputation: 838

I think you might have missed some library.

See the given below snippet I have added

Jquery library

bootstrap.js and

bootstrap.css

Its working fine. see the below snippet

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="navbar-inner">
       <div class="container-fluid"> 
           <div class="navbar-header">
               <a href="#" class="navbar-brand">MyApp</a>
           </div> 
           <ul class="nav navbar-nav navbar-right">
               <li><a href="#">Profile</a></li>
               <li><a href="#">Notifications</a></li>
               <li><a href="#">Messages</a></li>
               <li><a href="#">Options</a></li>
           </ul>
       </div>
   </div>
</nav>

Upvotes: 5

Related Questions