I have created two navigation bars, where the one below is included in the dropdown toggle icon when screen becomes small. On the first navigation bar, I have two items pushed to the far right. When I resize the screen, I can see the hamburger icon; however, these items become stacked on each other. I know that if I use navbar-expand the items will be displayed properly, but then the hamburger icon won't be shown.
This is my code:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- First navigation bar -->
<div class="container-fluid" style="margin-top: 0px;">
<nav class="navbar navbar-light navbar-expand-sm bg-white">
<div id="burger">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" style="border: none; background: none; outline:none;">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<a class="navbar-brand" href="#"> <img src="assets/logo/logo.PNG" width="160" height="60" class="d-inline-block align-top" alt=""> </a>
<div class="navbar-nav ml-auto"> <!-- the items on the right -->
<div class="dropdown item" style="margin-top: 12px; margin-right: 10px;">
<button class="no-style dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="notification_button">
<span class="icon icofont-notification text-secondary"></span>
<div>
<span class="badge badge-danger badge-sm">6</span>
</div>
</button>
</div>
<div class="dropdown item">
<button class="no-style dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="0, 10" style="border: none; background: none; outline:none;">
<span class="d-flex align-items-center">
<img src="/assets/content/user.jpg" style="border-radius: 500px!important;" alt="" width="40" height="40" class="mr-1"> <i class="icofont-simple-down"></i>
</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-end">
<a href="#" class="dropdown-item align-items-center"><span class="icon icofont-ui-home"></span> Edit account</a>
<a href="#" class="dropdown-item align-items-center"><span class="icon icofont-ui-user"></span> User profile</a>
<a href="#" class="dropdown-item align-items-center"><span class="icon icofont-ui-calendar"></span> Calendar</a>
<a href="#" class="dropdown-item align-items-center"><span class="icon icofont-ui-settings"></span> Settings</a>
<a href="#" class="dropdown-item align-items-center"><span class="icon icofont-logout"></span> Log Out</a>
</div>
</div>
</div>
</nav>
</div>
<!-- Second navigation bar -->
<div class="container-fluid" style="margin-top: -10px;">
<nav class="navbar navbar-light navbar-expand-sm">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/link-1">link</a>
<a class="nav-item nav-link" href="/link-2">link</a>
<a class="nav-item nav-link" href="/link-3">link</a>
</div>
</div>
</nav>
</div>How can I display the hamburger and the two items on the right without having them stacked on each other?
They are stacked on each other because their container has the navbar-nav class apllied, which contains the property "flex-direction:column", you should apply "flex-direction:row" instead in the css, or the class "flex-row" in the html:
<div class="navbar-nav ml-auto flex-row">
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments