Menu
I have copied a navbar HTML code from https://www.codeply.com/go/qhaBrcWp3v
Example 6:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Navbar 6
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Bdfdsfslog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
The code keeps the nav items to right but when I paste it and run my HTML code it doesn't work and all items are in the left place
here is my index.html
<html>
<head>
<title>Website Template</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home"></div>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Navbar 6
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- END OF NAVIGATION -->
</body>
I have tried Navbar code from https://getbootstrap.com/docs/5.0/components/navbar/ but I don't know how can I move nav items (ml-auto didn't work)
966
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
Move the brand above the navbar-header and give it the class navbar-right. This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.
The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...
l (left) has been replaced with s (start)r (right) has been replaced with e (end)Why margin left (ml-*) is not working in Bootstrap 5?
ml-auto no longer exists, and the Bootstrap 5 equivalent would be ms-auto:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block">
<!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/p/zzFC5XoyUm
Why margin right (mr-*) is not working in Bootstrap 5?
Additionally, mr-auto has been replaced with me-auto.
Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.
The flexbox utils such as justify-content-end can also be used as explained here
90
don't use justify-content-end use ms-auto
use for m- margin and p-padding
t - for classes that set margin-top or padding-topb - for classes that set margin-bottom or padding-bottoms - for classes that set margin-left or padding-left in LTR,
margin-right or padding-right in RTLe - for classes that set margin-right or padding-right in LTR,
margin-left or padding-left in RTLx - for classes that set both *-left and *-righty - for classes that set both *-top and *-bottom
2
I actually tried a different approach, although inspired by some of these posts previous to mine. I wanted to just align some buttons (the My Profile and Login buttons) on my navbar to the right while keeping all others left on the navbar.
position-relative
<ul>
<ul> positioned absolute and at the end like so: <ul class="navbar-nav position-absolute end-0 mx-3">
<li> before the <ul> you just made to maintain the spacing when shrinking the screen (as absolute elements will overlap with other static and relative elements).<ul> (find this out using Chrome inspect element). E.g. <li class="nav-item" style="width: 150px"></li>
{# Create Navbar #}
<nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="{{ path('home') }}">
<img src="/favicon/android-chrome-192x192.png" alt="Logo" style="height: 50px; width: 50px">
Company Name
</a>
<button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('guide_home') }}">Guide</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
</li>
{# Invisible div to prevent overlap of absolute positioned elements #}
<li class="nav-item" style="width: 150px"></li>
<ul class="navbar-nav position-absolute end-0 mx-3">
{# Create a login or logout link depending whether a user is logged in or not #}
{% if app.user %}
<li class="nav-item">
<a class="nav-link" href="{{ path('profile_home') }}">My Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_logout') }}">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_login') }}">Login/Register</a>
</li>
{% endif %}
</ul>
</ul>
</div>
</div>
</nav>
I found this a bit easier to wrap my head around compared to other solutions I've seen and was able to get it to work more easily. I hope this is useful for anyone else coming across this post. Please comment if you have any feedback about my method and if you have any improvements. Thanks! :)
Note: My example is done in a Symfony project using twig templates in case you find any of the syntax confusing. However, all the HTML is the same for any dev tools.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
