How to Make the Bootstrap 4 Navbar Dropdown Work on Hover Instead of Click

If you have ever created your own Bootstrap Navbar with a dropdown menu, the first thing you may notice is that you have to click the parent link to reveal the sub-menu. This is an intentional design decision according to Mark Otto:

“The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take explicit action.” – Mark Otto

It’s a valid point but there are always situations where people prefer the hover method. To be honest, not a lot of menus even feature the down chevron, so the hover element makes it clearer that there are sub-menu items to be clicked.

In this tutorial, we are going to be using Bootstrap 4 with the Jumbotron template as an example to show you how simple it is to achieve.

Prefer to dive straight into the CodePen, then click here.

Let’s Begin

Okay, let’s say we have the following HTML markup:


   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Menu Dropdown on Hover</h1>
      <p>Hey ho, so let's make your dropdown menu work on hover instead of click.</p>
      <p><a href="https://silvawebdesigns.com/" target="_blank" class="btn btn-primary btn-lg" role="button" rel="noopener noreferrer">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Learn</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Code</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Repeat</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>

  </div> <!-- /container -->

</main>

<footer class="container">
  <p>&copy; Silva Web Designs 2020</p>
</footer>

Now, the important part, to get the CSS to work on hover instead of click, we will be adding the following CSS:


body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

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

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

The key feature of the CSS is simply adding display: block; to the following class element; .dropdown:hover .dropdown-menu

And it’s really as simple as that.

We will need to include the Bootstrap Assets which as of the time of writing, the latest are:

With the CSS code, simply add the stylesheet <link> into your <head> before all other stylesheets to load your CSS.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

The with the JS, they require jQuery, and their own JavaScript plugins. Place the following scripts near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then the Bootstrap JavaScript plugins.

Bootstrap uses the jQuery’s slim build, but the full version is also supported:


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

And there we have it, it’s as simple as that really! Some common problems can be due to the order/positioning of the CSS/JS files, but other than that, it’s a simple feature to implement. You can also make it a bit fancier as well and add some animations into the mix to make the dropdown menu slide down/up. If you would like any help with this, don’t hesitate to get back to us in the comments and we’ll show you how it’s done.

We hope you’ve enjoyed this article and happy coding devs!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Import and Export or Duplicate Navigation Menus in WordPress

If you are wanting to export a navigation menu from one WordPress website to another, then you are in the right place. Maybe you are wanting to duplicate a menu to make it easier to re-create a similar type of menu? Well, we got this covered in this post as well.

Unfortunately, the default WordPress import/export feature only allows you to transfer the menu as part of the full site transfer, you can’t just do this on its own.

In this post, we’ll explain how you can easily import/export navigation menus in WordPress which will be a real time-saver!

Step 1. Export and Import Navigation Menus in WordPress

We found the best tool for the job is using the WPS Menu Exporter plugin. Once installed and activated you can now go to Tools » Export. You should now see an additional option to export just the Navigation Menu Items. This will include your menu and all the pages that are linked from your menu. If you have any posts in your menu, those will be includes along with any comments within them as well.

Select the Navigation Menu Items radio button and then click Download Export File button at the bottom.

This will create a download with just the menu to your computer which is stored as an XML file.

Step 2. Importing Your WordPress Menu to Your New Site

Now you can go to your new site and go to Tools » Import, select the file you exported in the previous step. If it’s not already installed, you will have to install the WordPress importer. When you visit the page, it will show an option to Install Now.

Once you’ve installed the WordPress importer, you should see a Run Importer link in place of the Install Now link.

After you click on this link, you’ll see the Import WordPress screen. Here, you’ll need to click the Choose file button so you can select the .xml file you downloaded earlier.

Once you’ve selected your file, go ahead and click the Upload file and import button.

You’ll then get a scrreen when you’ll be asked to Assign Authors. The default option is to import the original author. Although, it makes more sense to select an existing Administrator user as the author of the imported content on the new website. To do this, just select the user from the dropdown menu.

If you plan to re-use the content of the pages themselves, then you’ll also want to check the Download and import file attachments box. This means that images will be included in the import.

Once you’re happy with your settings, click the Submit button at the bottom of the page.

Upon completion, you’ll see a page where it says Import WordPress - All Done. Have Fun!.

You can now view your new menu you exported from your old website by going to Appearance » Menus

You can also click on the Pages tab in your WordPress dashboard to check out the new pages that have been imported along with the menu.

And that’s it, pretty simple process right?

Duplicating a Menu

So this part isn’t associated with the previous tutorial. This is simply if you are wanting to duplicate a menu on the same website. We’ve used this a bunch of times, especially when creating Header / Footer menus which are very similar, it’s just a big time saver really.

For this, we use the Duplicate Menu plugin.

After you have installed and activated the plugin you can now go to Appearance » Duplicate Menu.

On the next page, you will have an option to select a menu you wish to duplicate, and then provide the new menu name as shown below:

After clicking the Duplicate Menu button, your new menu will appear in Appearance » Menu with the new name you created. You can. now customise this to your exact needs. Very quick and simple right?

Well we hope you enjoyed this article, if you have any questions, feel free to get in touch or drop a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Converting Bootstrap navbar to WordPress menu

To do this you will need to include WP Bootstrap Navwalker in your functions.php which can be downloaded here, simple add:-

in your functions.php.

Now you will want to edit your header.php file so your menu looks something like:-


    <div id="nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
          <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
        </div>


        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
      </div><!-- /.container-fluid -->
    </nav>
</div><!-- #nav -->

As long as you have included your bootstrap (CSS/JS) files in your or through your functions.php file, you now have a working bootstrap nav menu in your WordPress Theme.

You can include the Bootstrap core CSS & JS files from CDNJS:-

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share