Topic: Navbar align right not working
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?
Hi
Is that to replace:-
<div class="collapse navbar-collapse" id="basicExampleNav">
TVM, Ken
Mateusz Łubianka staff commented 5 years ago
Yes, try to add class '.justify-content-end' to this element.
Best,
oldcelt commented 5 years ago
Hi Mateusz Many thanks, that worked a treat. Ken
Mateusz Łubianka staff commented 5 years ago
Hi,
I'm glad I could help.
Best
Hi @oldcelt,
Try to add class .justify-content-end.
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
Best,
Aryan Sharma commented 3 years ago
I MADE AN ACCOUNT JUST TO LIKE THIS COMMENT AND REPLY TO IT I WAS STRUGGLING SO MUCH
Aryan Sharma commented 3 years ago
you are amazing thank you
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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
santozsunder@gmail.com 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-autowas assigned to the element inside the collapsible container that itself sticks to the left of the navbar. Adding.justify-content-endto the collapse container does the job.Keep coding, Marcin