Good day,
I have a question. I am working on a website where I want the menu to be right aligned.
In theory it should be :
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
However it isn't aligning right. So I am doing something wrong.
And I am missing my error. I hope that someone could point me my blame. Because I am missing it. Fiddling with it for a couple of hours by now and it is driving me nuts.
My code is :
<ul class="nav justify-content-end" id="vpMenu">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Explore <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="explore.html">Explore</a>
<a class="dropdown-item" href="listing.html">Listing</a>
<a class="dropdown-item" href="single-listing.html">Single Listing</a>
<a class="dropdown-item" href="contact.html">Contact</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Listings <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="explore.html">Explore</a>
<a class="dropdown-item" href="listing.html">Listing</a>
<a class="dropdown-item" href="single-listing.html">Single Listing</a>
<a class="dropdown-item" href="contact.html">Contact</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
I have put the source code online since my blame is probably somewhere in my CSS code:
- Edit:
By : Manny
<ul class="nav justify-content-end" id="vpMenu">
to
<ul class="nav ml-auto justify-content-end" id="vpMenu">
.ml-auto Was the solution!
Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).
