How to Add a Drop-Down Menu in Blogger / Blogspot Emporio or Other Themes

January 30, 2021

Make Simple, Effective, Quick, and Portable Navigation Bar Drop-Down Menus for Blogger / Blogspot Themes

This has been the longest headache for our blogger based website for not having dropdown menus. We much prefer a drop-down navigation menu style than the default blogger single bar menu. We finally found a good-enough solution and we are super excited about it.

Problem: 

The default new blogspot / blogger themes, such as Emporio don't have a drop down menu for navigation.

Solution: 

  1. Open Blogger -> Layout setting page.
  2. Add an HTML gadget.
  3. Include the following code snippet in the gadget.
  4. Customize the menu items in the HTML code section at the bottom.
  5. Save the gadget.
  6. Move it to the Header container at the top, above the "Page Header" gadget.
  7. Save the layout and try it out.

Benefits: 

  • It's self-contained, so it's neat and easy to port to other blogs.
  • Does not require modifying the theme's HTML file.
  • It works with responsive themes like Emporior and others.
  • It's sourced from the popular W3Schools, so it's clean.

Limitations: 

  • When the drop down menu reaches the post summary section, items cannot be clicked, so it's needs to stay at the top.

Source of Inspiration: 

https://www.w3schools.com/howto/howto_css_dropdown.asp

Code: 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Navigation</title>
  <meta name="description" content="Navigation Dropdown Menu">
<style>
/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 1.25em;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 1.25em;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>

<!-- HERE IS TO MODIFY YOUR DROOP DOWN MENU ITEMS AND LINKS -->
<body>
<div class="navbar">
  <a href="#">Main1</a>
  <a href="#">Main2</a>
  <div class="dropdown">
    <button class="dropbtn">DropDowns
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Dropdown 1</a>
      <a href="#">Dropdown 2</a>
      <a href="#">Dropdown 3</a>
    </div>
  </div>
</div>
</body>
</html>

Tags:

Post a Comment

0 Comments