Navbar align right not working

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 3 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 3 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

Add comment

oldcelt free answered 4 years ago

0 0 Best answer

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

Add comment

Mateusz Łubianka staff answered 4 years ago

2 0 Best answer

Hi @oldcelt,

Try to add class .justify-content-end.

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

Best,

Aryan Sharma free commented 3 years ago

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

Aryan Sharma free commented 3 years ago

you are amazing thank you

Add comment

Write

Create snippet

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

oldcelt

80Support score
9Questions 3Answers 0Snippets