Submenu item in collapsed navbar

Question

I have following menu

(i don't know why it doesn't show the 3 icon bars when its collapsed but they are there so you can hover over it and click it it will open up)

code

https://jsfiddle.net/x4mcq4h7/13/

My issue is that when I hover over the list item (yogaclasses) that has a submenu (yogastyles), I can't actually click on it because it goes away whenever i go on it with my mouse.

I have tried to change around the CSS I have but with no luck and I don't know what or where I should look for changing this neither...

I would like it to behave like when you go over the parent list item, it shows the submenu over the underlying one (event menu) so that you can't see the event menu text, and well then of course actually be able to click on it :)

If someone can help me in the right direction I would really appreciate it!

Answer 1

You need to add z-index that works fine and make that link clickable,

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #CECB26;
    min-width: 180px;
    border-radius: 4px;
    z-index:9;/*Add this*/
}

Check this updated jsFiddle

Answer 2

By default the bars & button border have a transparent color, you need to assign them a color, add the following CSS:

.navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-toggle {
  border: 1px solid #fff;
}

Have a look at the snippet below:

a,
#home-slider .caption h1 span,
#twitter-carousel .item span,
#footer .footer-bottom,
#single-portfolio .close-folio-item:hover,
.single-table.featured .btn.btn-primary,
.contact-info ul li a:hover,
#footer .footer-bottom a {
    color: #8E8C21;
}

.btn.btn-primary:hover {
    background-color: lightgoldenrodyellow;
    color: #CACA4D;
    border-color: #CACA4D;
}

.btn-submit {
    background-color: transparent;
    border: 1px solid #CACA4D;
}

    .btn-submit:hover {
        background-color: #CACA4D;
    }

.btn-primary:hover {
    background-color: #8E8C21;
    border-color: #CACA4D;
}

a:hover, a:focus {
    color: #CACA4D; /*#027db3;*/
}

.main-nav,
.service-icon,
.progress-bar.progress-bar-primary,
.single-table.featured,
.btn.btn-primary,
.twitter-icon .fa-twitter,
.twitter-left-control:hover, .twitter-right-control:hover,
.post-icon,
.entry-header .date:after,
.btn-loadmore:hover,
#footer,
.caption .btn-start:hover,
.left-control:hover,
.right-control:hover,
.folio-overview a:hover {
    background-color: #C9C903;
}

    /*.main-nav{
    min-height:60px;
}*/

    .main-nav ul li a {
        border-radius: 4px;
        height: 50px;
    }

        .main-nav ul li a:hover {
            background-color: #F7F7CD;
            color: #CACA4D;
        }

.twitter-left-control:hover,
.twitter-right-control:hover,
.btn-loadmore:hover {
    border: 1px solid #C9C903;
}

.caption .btn-start:hover,
.left-control:hover,
.right-control:hover {
    border-color: #CACA4D; /*#028fcc;*/
}

.twitter-icon .fa-twitter:after {
    border-color: #CACA4D;
    transparent transparent;
}

/*------------------------------------------*/

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #CECB26;
    min-width: 180px;
    border-radius: 4px;
}

    .dropdown-content a {
        display: block;
        text-align: center;
    }

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

.navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-toggle {
  border: 1px solid #fff !important;
}

.dropdown-content {
  width: 100%;
  z-index: 10;
}

.dropdown-content a {
  text-align: left;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="main-nav">
        <div class="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="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="scroll active"><a href="#"><i class="fa fa-home fa-lg" aria-hidden="true"></i>  Home</a></li>
                    <li class="scroll dropdown">
                        <a href="#"><i class="fa fa-universal-access fa-lg"></i>Yogaclasses</a>
                        <div class="dropdown-content">
                            <a href="#"><i class="fa fa-universal-access fa-lg" aria-hidden="true"></i>  Yogastyles</a>
                        </div>
                    </li>
                    <li class="scroll"><a href="#"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i> Events</a></li>                    
                    <li class="scroll"><a href="#"><i class="fa fa-phone-square fa-lg" aria-hidden="true"></i>  Contact</a></li>
                </ul>
            </div>
        </div>
    </div><!--/#main-nav-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Hope this helps!