Topic: Navbar align right not working

oldcelt free asked 4 years ago


Expected behavior Nav items should align right

Actual behavior Not aligning right

Resources (screenshots, code snippets etc.) Here is the code and the ul element class specifies ml-auto but the nav items remain firmly on the left!

enter code here <!-- Navbar brand -->
<a class="navbar-brand" href="#">Logo</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
  aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">

  <!-- Links -->
  <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="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
  <!-- /Links -->
</div>
<!-- /Collapsible content -->

Help please?


santozsunder@gmail.com free commented 2 years ago

Thanks It worked for me too, but can you please explain why ml-auto didn't work here?

Thanks


Marcin Luczak staff commented 2 years ago

Hi @santozsunder@gmail.com,

In this case this might be the problem ml-auto was assigned to the element inside the collapsible container that itself sticks to the left of the navbar. Adding .justify-content-end to the collapse container does the job.

Keep coding, Marcin


oldcelt free answered 4 years ago


Hi

Is that to replace:-

<div class="collapse navbar-collapse" id="basicExampleNav">

TVM, Ken


Mateusz Łubianka staff commented 4 years ago

Yes, try to add class '.justify-content-end' to this element.

Best,


oldcelt free commented 4 years ago

Hi Mateusz Many thanks, that worked a treat. Ken


Mateusz Łubianka staff commented 4 years ago

Hi,

I'm glad I could help.

Best


Mateusz Łubianka staff answered 4 years ago


Hi @oldcelt,

Try to add class .justify-content-end.

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

Best,


Aryan Sharma free commented 2 years ago

I MADE AN ACCOUNT JUST TO LIKE THIS COMMENT AND REPLY TO IT I WAS STRUGGLING SO MUCH


Aryan Sharma free commented 2 years ago

you are amazing thank you



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.14.1
  • Device: Laptop
  • Browser: Opera
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No