CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
serk
serk

Reputation: 4399

Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.

I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...

Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.

I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4

HTML:

 <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand">SiteName</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">LinkHere<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    <li class="dropdown-header">Names</li>
                        <li class="menu-item dropdown dropdown-submenu">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level1</a>

                            <ul class="dropdown-menu">

                                <li class="menu-item ">
                                    </li><li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.1</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">Level3-Link1</a>
                                                <a href="#">Level3-Link2</a>
                                            </li>
                                        </ul>
                                    </li>


                                <li class="menu-item ">
                                    </li><li class="menu-item dropdown dropdown-submenu">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.2</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">Level3.1</a>
                                                <a href="#">Level3.2</a>
                                            </li>
                                        </ul>
                                    </li>


                            </ul>

                        </li><li class="menu-item dropdown dropdown-submenu">   
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">OtherLink</a>
                            <ul class="dropdown-menu">

                                <li class="menu-item ">
                                    <a href="#">Link1</a>
                                    <a href="#">Link2</a>
                                </li>


                            </ul>


                        </li>

                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Email</li>
                                <li class="menu-item ">
                                    <a href="#">Yahoo</a>
                                </li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Phone</li>
                                <li class="menu-item ">
                                    <a href="#">CallNow</a>
                                </li>






                    </ul>
                </li>
            </ul>



            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>



            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>


         </div>
    </div>
</div>
        <!--/.nav-collapse -->

and CSS:

    /*custom for submenu here*/


.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

 @media only screen and (max-width:767px){
    .dropdown-submenu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        width:100%;
    }

    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;

    }

    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }

    .navbar-default .navbar-nav .dropdown-menu > li > a{
        color:#777;
    }

  .navbar-nav .dropdown-menu .dropdown-submenu > a{
        display:block;
        margin-top: 0;
  }
}

Upvotes: 2

Views: 3165

Answers (1)

Sasith
Sasith

Reputation: 790

Change your css to this 

 @media only screen and (min-width:768px){
  .dropdown-submenu:hover>.dropdown-menu {
    display:block;
  }
}

also add this script to page.

$(document).ready(function(){
  $('.dropdown-submenu a').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

Here is updated bootply. Hope this helps you.

Upvotes: 3

Related Questions