Topic: Navbar Align right
I need all my nav items all to right not centered...
Heres my code
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark justify-content-end">
<div class="container">
<!-- 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 justify-content-center font-weight-bold" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link hvr-overline-from-center" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-overline-from-center" href="#">Staff</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-overline-from-center" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle hvr-overline-from-center" href="http://example.com" id="navbar DropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Other
</a>
<div class="dropdown-menu" aria-labelledby="navbar DropdownMenuLink">
<a class="dropdown-item hvr-underline-from-center" href="#">Showcase</a>
<a class="dropdown-item hvr-underline-from-center" href="#">Applications</a>
<a class="dropdown-item hvr-underline-from-center" href="#">Community</a>
</div>
</li>
</ul>
<!-- Links -->
</div>
</nav>
Add comment
Marta Szymanska staff pro premium answered 6 years ago
Hi,
please, look at your code, you have a class
.justify-content-center
in this line: <div class=”collapse navbar-collapse justify-content-center font-weight-bold” id=”basicExampleNav”>
. Remove that class and replace it with .justify-content-end
.
Best,
Marta FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No