How Do I Add a Drop-down Navigation Menu in Blogger

Drop down navigation menu is a very significant part of a blog that helps visitors navigate your blog more easily.
drop down navigation menu bar
In WordPress, you can easily add drop down menu using their drag-drop feature. But when it comes to Blogger, inserting a drop-down navigation menu bar can be little tricky!

To do that we might have to take the help of HTML and CSS codes.

So, here in this tutorial, I will show you the easiest way to create a drop-down menu and drop-down sub-menu on your blog.

Why do I Add a Drop-down Menu?

As I told you above, creating drop-menu is the best way to let your visitors navigate your site more efficiently.

For example, many peoples don't like to scroll down on any blog to find what he/she want to seek. Instead, they will be happy if they can navigate your blog from the menu bar, which will save their time.

You can also prefer a search box so that they could search directly what they are looking for. Here's the guide for the custom search box.

Adding Drop-Down Navigation Menu to Blogger

To add a navigation menu, we need to insert the piece of codes to HTML/JavaScript widget.
1.Login to your blogger account and go to ‘Layout’ Section and then Click on ‘Add a Gadget’ button, and then a popup window will come out.
Adding navigation menu to Blogspot
2.Find the Gadget called ‘HTML/ JavaScript widget’ and click on it.
Add navigation menu to Blogger
3. Copy paste the Navigation Menu Codes in the box, give a 'title' and 'save' the gadget.
insert navigation menu to Blogger

Now, again hit ‘Save Arrangements’ to save your work & you're done!

HTML Codes for Horizontal Navigation Menu

This is a responsive navigation menu with a background color white and grey hover color. You can change the color anytime according to your blog's primary color.

If you want to see, a preview of the menu bar, then simply visit my blog because I use the same navigation menu that I'm sharing here.
<!doctype html>

<style>
body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #fff;
}

.topnav a {
  float: left;
  display: block;
  color: #262323;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}
</style>

<div class="topnav" id="myTopnav">
  <a href="#">Home</a>
  <a href="#">Disclaimer</a>
  <a href="#">Privacy Policy</a>
  <a href="#">Sitemap</a>
  <a href="#">About Us</a>
  <a href="#">Contact Us</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</div>
</!doctype> 
Customization
Change the blue colored "#" sign with your actual page URLs and the red color codes for the title of that page.
HTML Codes for Sub Drop-down Navigation Menu
In order to insert drop-down navigation bar, you need to apply 2 methods.
In the first method you need to add HTML codes into your blank JavaScript widget as I've shown above, and in the 2nd method, we need to add the CSS codes in your template manually.

So, let's do it.

Method1: Adding Navigation Menu HTML Codes to Blogger Widget
<ul id="Navigation_Menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">SEO</a></li>
  <li>
    Learn Blogging
    <ul>
      <li><a href="#">Blogger</a></li>
      <li><a href="#">WlordPress</a></li>
      <li><a href="#">Blog Design</a></li>
    </ul>
  </li>
<li>
   How-To
    <ul>
      <li><a href="#">Android</a></li>
      <li><a href="#">iOS</a></li>
      <li><a href="#">Java</a></li>
    </ul>
  </li>
 <li><a href="#">Social Media</a></li>
  <li><a href="#">YouTube</a></li>
</ul>
Method2: Adding Navigation Menu CSS Codes to Blogger Template

1. Go to your 'Theme' section and hit the 'Customize' button.
Adding CSS Codes to Blogger
2. Click 'Advanced' tab, scroll down and hit the 'Add CSS' button.
Adding CSS Codes to Blogspot
3. Now copy and paste the below codes in that blank box and 'Apply to Blog' button.
inserting CSS Codes to Blogger

.tabs-inner .widget ul#Navigation_Menu {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#Navigation_Menu li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#Navigation_Menu li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#Navigation_Menu li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#Navigation_Menu li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#Navigation_Menu li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#Navigation_Menu li ul li {
  background: #2a2a; /* background colour of the sub menu items */
  display: block;
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#Navigation_Menu li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#Navigation_Menu li ul li:hover {
  background: #7676; /* background colour when you roll over sub menu items */
} 
.tabs-inner .widget ul#Navigation_Menu li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
Congratulations! You've successfully added the navigation menu on your site.
Conclusion 
By performing above 2 easy ways you can easily implement the drop-down navigation menu bar to your blog.

Just make sure, that you copy paste the exact codes I've shown here. If you miss even a single character then it may end up with an error, so be careful with that.

At last, If you're getting any error while adding the navigation menu codes in Blogger, then let me know in the comment box below!

No comments:

Recently Published Posts