I am currently working on creating an admin UI using bootstrap 4 that includes two menus, one vertical and the other at the top bar. My goal is to have a navigation layout similar to this:
https://i.sstatic.net/q2NbY.png
Here is the snippet of my HTML code for achieving this:
<div class="dashboard">
<nav class="navbar navbar-expand-sm bg-white">
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Test 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Test 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</nav>
<div class="nits-nav-left-aside bg-white">
<nav class="navbar navbar-light navbar-expand-sm px-0 flex-row flex-nowrap">
<ul class="nav flex-sm-column flex-row">
<li class="nav-item">
<a href="#" class="nav-link">Side 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Side 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Side 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownSideMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Side
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownSideMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
In order to style the layout as intended, I'm utilizing the following CSS properties:
.dashboard {
color: #0a0302;
height: 100%;
background-color: #EAEDED;
}
nav {
vertical-align: top;
height: 70px;
box-shadow: 0 4px 25px rgba(0,0,0,.2);
}
.nits-nav-left-aside {
top: 0;
left: 0;
position: absolute;
padding: 0;
width: 70px;
height: 100%;
z-index: 10;
}
.nits-nav-left-aside > nav > ul {
top: 100px;
}
However, the rendered UI seems different from what was desired:
https://i.sstatic.net/n6sPD.png
You can view the expected layout at this link:
Any assistance in resolving this issue would be greatly appreciated.