Alaric Alaric - 2 months ago 26
CSS Question

Bootstrap dropdown menu on hover (With Creative-Tim Icon Navbar)

This is not the same as just a normal Bootstrap navbar, it is the Creative Tim icon navbar for Bootstrap found at (http://www.creative-tim.com/live/navbar-with-icons) I'm having some trouble getting my dropdown navbar to open when hovered over. I tried using...

.dropdown:hover .dropdown-menu {
display: block;
}


but have had no joy. I suspect the creative tim navbar is getting in the way of something.

Here is my HTML:

<nav class="navscroll navbar navbar-light" style="background-color: #ecf1f0; color: #fff;" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynav">
<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="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav" id="scroll">
<li>
<a href="#">
<i class="fa fa-home" aria-hidden="true">
</i>
<p>Home</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users" aria-hidden="true">
</i>
<p>About Us</p>
</a>
</li>
<li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cube" aria-hidden="true">
</i><p>Products</p></a>
<ul class="dropdown-menu multi-column columns-3">

<li class="col-sm-4">
<ul class="multi-column-dropdown" style="font-size:17px;">
<li><a href="#process" style="font-weight: bold">Banner Systems</a></li>
<li><a href="#process">Roll Up</a></li>
<li><a href="#process">L/X Banner</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#process" style="font-weight: bold">Cases</a></li>
<li><a href="#process">Foam Cases</a></li>
</ul>
</li>

<li class="col-sm-4">
<ul class="multi-column-dropdown" style="font-size:17px;">
<li><a href="#process" style="font-weight: bold">Image Walls</a></li>
<li><a href="#process">Pop Up wall</a></li>
<li><a href="#process">Tube Wall</a></li>
<li><a href="#process">Alu Wall</a></li>

</ul>
</li>
<li class="col-sm-4">
<ul class="multi-column-dropdown" style="font-size:17px;">
<li><a href="#process" style="font-weight: bold">Outdoor Systems</a></li>
<li><a href="#process">Outdoor / Flags</a></li>
<li><a href="#process">Wall Frames</a></li>

</ul>
</li>


</ul>
</li>


</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true">
</i>
<p>Shop</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download" aria-hidden="true">
</i>
<p>Downloads</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-newspaper-o" aria-hidden="true">
</i>
<p>News</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true">
</i>
<p>Contact Us</p>
</a>
</li>
</ul>


</div>
</nav>


Here is my CSS for the Navbar dropdown menu

.navbar-nav > li > .dropdown-menu{
display: block;
padding: 0;
z-index: 9000;
position: absolute;
-webkit-border-radius: 0px !important;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
border-radius: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
-webkit-filter: alpha(opacity=0);
-moz-filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
-o-filter: alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

.navbar-nav > li.open > .dropdown-menu{
-webkit-transform-origin: 29px -50px;
-moz-transform-origin: 29px -50px;
-o-transform-origin: 29px -50px;
-ms-transform-origin: 29px -50px;
transform-origin: 29px -50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}

Answer

This piece of code is blocking it

.navbar-nav > li > .dropdown-menu {
display: block;
padding: 0;
z-index: 9000;
position: absolute;
-webkit-border-radius: 0px !important;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
border-radius: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
-webkit-filter: alpha(opacity=0);
-moz-filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
-o-filter: alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

All you have to do is change this:

.navbar-nav > .li.open > .dropdown-menu{
...
}

Into

.navbar-nav > .dropdown:hover > .dropdown-menu{
...
}

See the live example on codepen: http://codepen.io/anon/pen/EgaVLv

Comments