Check out my testing site here.
I envision the navigation of my website to look like this in the near future, albeit at a lower resolution.
While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes the submenu to shift up and to the left. It also fails to display inline as intended.
Although using display: inline-flex helps me achieve an inline layout, it still results in the submenu moving up and to the left.
The current setup employs wp_nav_menu for displaying the navbar, allowing easy management through wpadmin. Here is the HTML code:
<div class="navbar navbar-static" role="navigation">
<div class=""> <!-- This used to have container. -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<!-- Menu setup goes here -->
<?php
$args = array(
'menu' => 'header_menu',
'menu_class' => 'nav navbar-nav nav-justified',
'menu_id' => 'test',
'container' => 'false',
'before' => '',
'link_after' => ''
);
wp_nav_menu( $args );
?>
</div><!--/.navbar-collapse -->
</div>
</div>
Here is the corresponding CSS for the Navbar:
/***********************************/
/* Hover effects on nav display */
/***********************************/
.navbar-nav.nav-justified > li{
float:none;
}
.admin-bar .navbar-fixed-top {
margin-top: 32px;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle {
background-color: #550015;
float: left;
margin-left: 15px;
}
/*Dropdown nav items*/
@media (min-width:768px) {
.sub-menu {
display: none;
position: absolute;
background: white;
padding: 10px 15px;
width: 200px;
}
li:hover .sub-menu {
display: block;
}
.nav>li>a {
/*padding: 10px 70px;*/
color: black;
}
}
/*On hover color change*/
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}
.sub-menu li {
margin-bottom: 10px;
list-style: none;
}
.sub-menu li:last-child {
margin-bottom: 0;
}
.sub-menu a {
color: #000;
}
/*Hover link effects*/
.sub-menu a:hover {
color: #000;
text-decoration: none;
}
.current-menu-item > a, .current-menu-parent > a {
background: transparent;
}
.current-menu-parent li a {
background: inherit;
}
/*Hover effects for main menu*/
.nav-justified a:after {
clear: both;
display: block;
content: "";
position: relative;
width: 0;
left: 50%;
height: 2px;
background: rgba(0, 0, 0, 0.56);
-webkit-transition: width 0.2s, left 0.2s;
-moz-transition: width 0.2s, left 0.2s;
-o-transition: width 0.2s, left 0.2s;
transition: width 0.2s, left 0.2s;
border-radius: 1px;
}
.nav-justified a:hover:after, .nav-secondary a:focus:after {
width: 100%;
left: 0;
}