Issue
I have a Navbar and i am trying to align the some Links to Left and some to right. I tried it with two lists one with class "ms-auto" and "me-auto" but this did not worked (everything is always on the left, see picture). In a nutshell, I want to have the "Dropdown" Item on the right of the Navbar and the rest on the left.
<nav class="navbar fixed-top">
<div class="navbar-nav position-fixed" id="navbarSupportedContent">
<a class="navbar-brand" href="/">Company</a>
<ul class="navbar nav ms-auto">
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
<li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="navbar nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
</li>
</ul>
</div>
</nav>
Solution
I added a couple of divs to contain the logo with the left items. Then just some flex and margin classes.
<nav class="navbar fixed-top">
<div class="navbar-nav position-fixed d-flex flex-row w-100" id="navbarSupportedContent">
<div class="d-flex ms-0">
<a class="navbar-brand" href="/">Company</a>
<ul class="navbar nav">
<li class="nav-item pe-2"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item pe-2"><a href="/Home/About" class="nav-link">About</a></li>
<li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="ms-auto me-0">
<ul class="navbar nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
</li>
</ul>
</div>
</div>
</nav>
Answered By - Superhands89
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.