Make bootstrap mega menu open on hover instead of on click

Question

I am using a bootstrap mega menu and I have it styled and working as I need, however I need it to open for desktop devices on hover (instead of on click). I thought I would be able to easily do this with just css, but I cannot get it to work.

Any suggestions? I am open to using jQuery or jscript, but I am not very fluid with these just yet.

Working jsfiddle: https://jsfiddle.net/L2o657p6/4/

HTML:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Mega Menuu</title>

</head>

<body>


<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
        <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" href="#">Menu Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Today <span class="sr-only">(current)</span></a>

          <div class="dropdown-container">
              <div class="container">
                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="media">
                      <div class="media-left">
                        <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                        <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                        <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                      </div>
                      <div class="media-body">
                        <h5>Today's Featured Collections</h5>
                        <ul class="list-links">
                          <li><a href="#">Press Every Button</a></li>
                          <li><a href="#">Travel with Technology</a></li>
                          <li><a href="#">Smart Choice</a></li>
                          <li><a href="#">Fall in Love with Tech</a></li>
                          <li><a href="#">Smartphones at a Snip</a></li>
                        </ul>

                      </div>
                    </div>
                  </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <div class="media">
                  <div class="media-left">
                    <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                  </div>
                  <div class="media-body">
                    <h5>Today's Trending Collections</h5>
                    <ul class="list-links">
                      <li><a href="#">Harley-Davidson</a></li>
                      <li><a href="#">Will you be my Valentine?</a></li>
                      <li><a href="#">Summer Wedding Bridesmaid Dresses</a></li>
                      <li><a href="#">Pink Wedding Centerpiece Ideas</a></li>
                      <li><a href="#">Wedding Party Table Runners</a></li>
                      <li><a href="#">Backyard Wedding Reception</a></li>
                    </ul>

                  </div>
                </div>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <h5>My Collections</h5>
                <span class="text-muted">You currently have no collections. <a href="#">Learn how to create one</a>.</span>
              </div><!-- /col -->

            </div><!-- /row -->
              </div>
          </div><!-- /dropdown-container -->

        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fashion</a>
          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Men's</a></li>
                  <li><a href="#">Women's</a></li>
                  <li><a href="#">Kids</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Shop for</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Jewelry &amp; Watches</a></li>
                  <li><a href="#">Handbags &amp; Accessories</a></li>
                  <li><a href="#">Health &amp; Beauty</a></li>
                  <li><a href="#">Shoes</a></li>
                  <li><a href="#">Sales &amp; Events</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Electronics</a>

          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li><a href="#">Cell Phones &amp; Accessories</a></li>
                  <li><a href="#">Cameras &amp; Photo</a></li>
                  <li><a href="#">Computers &amp; Tablets</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Other categories</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Deals</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-3">

                <h5>Best deals of the day</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Waterproof cellphone cover</h5>
                    <p>$5.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Large 20 slot leather watch box organizer</h5>
                    <p>$25.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
                    <p>$319</p>
                  </div>
                </a>

              </div><!-- /col -->


            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact Us</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-6 col-md-4">
                <h5>Contact us</h5>
                <p>Feel free to drop us a line, we will respond as sson as possible.</p>
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputText1">Text</label>
                    <textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-8">
                <img src="holder.js/100px260?text=Map">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

CSS:

.nav > .dropdown-megamenu {
  position: static;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-container {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}
.dropdown-megamenu > .dropdown-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 100%;
  padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
  display: block;
}
.link-image .media-object {
  float: left;
  margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
  margin-left: 7.5px;
}
.thumbnail .caption {
  min-height: 120px;
}
.thumbnail:hover {
  text-decoration: none;
}
/* Link list */
.list-links {
  list-style: none;
  padding: 0;
}
.list-links li {
  line-height: 1.71428571;
}
.list-links a {
  color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
  color: #22527b;
}

html,
body {
  height: 100%;
  min-height: 500px;
}
body {
  background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
  background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
  h3 {
      font-family: 'Open Sans', sans-serif;
      font-weight: bold;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 2rem;
      color: #fff;
    }

Xhynk · Accepted Answer · 2018-03-14 22:06:43Z

2

You can just add a desktop only media query:

@media (min-width: 768px){
    .navbar-nav .dropdown-megamenu:hover .dropdown-container {
        display: block;
    }
}

Here's a fiddle: https://jsfiddle.net/vqubh18j/

You could trim the selector down to dropdown:hover .dropdown-container if you wish.

Also note there is a 2px top margin on the dropdown that makes a tiny gap between the navbar and the dropdown, allowing slower mouse movers to have the menu disappear unintentionally:

.dropdown-container {
    ...
    /* Should probably be removed or replaced with
       margin: 0; border-top: 2px solid transparent; */
    margin: 2px 0 0;
    ...
}

edited Mar 14, 2018 at 22:06

answered Mar 14, 2018 at 21:54

Xhynk

13.9k8 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rex Over a year ago

You are awesome! I tried that, but I was using .dropdown:hover (not .dropdown-megamenu:hover. Thank you again!

Xhynk Over a year ago

My pleasure! .navbar-nav .dropdown:hover .dropdown-container would be acceptable as well, or you could narrow it to .dropdown:hover .dropdown-container if you wanted. Good luck! Side note: It looks really good!

Xhynk Over a year ago

Also I updated with a small issue - there's a tiny 2px margin above the dropdown menu that should probably be removed!

Rex Over a year ago

One follow-up question. The menu is working great, but I found that if a user clicks on any of the parent nav items (instead of just hovering) it "sticks/locks" the dropdown open until they click on another menu item. So, if they click on one of the parent nav items, then hover over any of the other nav items, the dropdown of the parent that they clicked on remains open while they hover over the other parent nav items. Is there a way to remove the "sticky" dropdown from remaining open when clicked and only display when hovered on desktops?

Rex Over a year ago

Never mind- I got it to work with some jQuery. Thanks again.

|

qazwsx000xswzaq · Accepted Answer · 2018-03-14 22:17:03Z

When one clicks on dropdown-toggle, class open is added to dropdown-megamenu.

.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu, 
.nav > .dropdown-megamenu.open > .dropdown-container {
    display: block;
}

Adapting the above CSS selector to the hover pseudo-class will give the following:

.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu, 
.nav > .dropdown-megamenu:hover > .dropdown-container {
    display: block;
}

As hovering is not available on touch devices, the above selector is better wrapped in a media query.

@media (min-width: 768px) {
    .nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu, 
    .nav > .dropdown-megamenu:hover > .dropdown-container {
        display: block;
    }
}

Updated JSFiddle

Collectives™ on Stack Overflow

Make bootstrap mega menu open on hover instead of on click

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related