Navigation menu is a vital part of a blog. A blog is not complete without navigation menu. In this post, I will share a responsive drop down menu for blogger. This is a mobile responsive drop down menu. By default, there is no opportunity to create a responsive drop down menu in blogger.
Almost every blogs are using the responsive template by this time. So with this responsive template, we need a beautiful responsive drop down menu for arranging our blog’s categories, pages, and other important links. If our menu is not responsive then we will surely lose user experience. On the other hand, a drop down menu will let us arrange our navigational elements more beautifully.
That’s why I have decided to share this responsive drop down menu. I have used only HTML and CSS for designing this menu. The menu also contains three follow buttons on the right side of it. The user must click to expand the menu for the responsive view. Now let’s see how to add this responsive drop down menu in your blogger blog.
Responsive Drop Down Menu For Blogger:
You can add this drop down menu where ever you want. I know that everyone is not using the same blogger template. So I will show you how to add this template to a default blogger template. The entire procedure of adding this menu will be same but you have to choose the position for adding this menu to your own template.
Step 1: Login to your blogger account and go to the Template > Edit HTML. Here you will see raw codes of your blogger template. My suggestion is, before editing you should keep a backup of your blogger template.
Step 2: We usually use the navigation bar at the header section of our blog. Whatever template you are using you will find the header section and some header widgets. Header widgets codes may seems like this: <b:section class=’header’ id=’header’ preferred=’yes’> and the ending of the header section may contain this code: <div style=’clear:both’/> with one or more ending </div> tag.
So you should put the HTML code of this drop down navigation menu right after the header section of your template.
Step 3: Here is the HTML part of your navigation menu. Copy this code and paste it into your blogger template right after the header section as I have told you before.
Code:
<div id='topnav-outside'>
<div id='topnav-intside'>
<div class='bofollowbutton-nav'>
<a href='https://www.facebook.com/blogornate' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfn2yQFeFfwLrrt9x-itJ93kNRbapBd5DKkODRn-Kv2TMyLmrAdw5KgGHklybGqWuT-HcTS2sWN9ua2vy6zCmWWHIH11_48TlfMrrW1g9rYmuyWEziWLIMQjcXfP22uRwPNdgwwQImAKY/s1600/facebook_bo.png'/>
</a>        <a href='https://twitter.com/Blog_Ornate' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFADMeb_9BRgCMTAmK995xXzKcgBNm5DiOeHRb13-sKmFq2TI-SDMYeJdEQzH2y0UWtNXb8BCcMzrALDpHu3-f4IfchKOfmHOvqcZsUyhQPwOA55a6B-wYOgK3e-VzRClGMJvDpKkeil3V/s1600/twitter_bo.png'/>
</a>        <a href='https://plus.google.com/+Blogornatepage' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZVvzfN7pphneGY3pnFJJQVlNO7MKPc2sS8NwOBqWuH5Ieuc2BT72BIEojkZVYu6g2Sr5_DnJRYP5umrS_KqW-IRnBMmyIqHWAQ1QLIgGBPvnyJYFn2JKLqU4n4C878oYgmADfADAM9y4p/s1600/gplus_bo.png'/>
</a>
</div>
<div id='bonav' role='navigation'>
<a href='#bonav' title='Show navigation'>
☰ Show Menu
</a>
<a href='#' title='Hide navigation'>
☰ Hide Menu
</a>
<ul>
<li class='home-icon'>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaX_I7Xvrfj4KQ_qO5hHzFTl868E9ByhMwvNoYufIcbmi-bX-MmqodsLJ3f2cTIlWs3JtTzfZjrcn2npkIbPImEFQHL9h9xgzGMwHD0_E6Mj7dymJgTOVmp3oFCvJOOo-J-EEOMkFA1WMr/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 1</a>
<ul>
<li><a href='#'>Sub Menu Item 1</a></li>
<li><a href='#'>Sub Menu Item 1.1</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 2</a>
<ul>
<li><a href='#'>Sub Menu Item 2</a></li>
<li><a href='#'>Sub Menu Item 2.2</a></li>
<li><a href='#'>Sub Menu Item 2.3</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 3</a>
<ul>
<li><a href='#'>Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href='#'>Menu Item 4</a></li>
<li><a href='#'>Menu Item 5</a></li>
</ul>
</div>
</div>
</div>
Configuration:
Replace the highlighted lines with your own Facebook, Twitter and Google Plus URLs.
Replace the Highlighted “#” with your own menu or sub menu item URLs.
You can increase or decrease the menu or sub-menu items.
Replace the highlighted lines with your own Facebook, Twitter and Google Plus URLs.
Replace the Highlighted “#” with your own menu or sub menu item URLs.
You can increase or decrease the menu or sub-menu items.
Step 4: I hope you have successfully added the HTML code in your blogger template. Now it is time to add style for your blogger drop down navigation menu. For adding the CSS style, copy the CSS code from below:
CSS Code:
/* Header top navigation menu
-----------------------------------------------*/
#topnav-outside {background:#fff;width:100%;min-height:30px;margin:0 auto;padding:0;-moz-box-shadow: 0 8px 6px -6px #ccc;-webkit-box-shadow: 0 8px 6px -6px #ccc;box-shadow: 0 8px 6px -6px #ccc;}
#topnav-intside {max-width:1120px;min-height:30px;margin:0 auto;padding:0;}
.bofollowbutton-nav{float:right;margin:0;padding:8px 5px 0 5px;overflow:hidden;clear:both;}
.status-msg-wrap{display:none;}
#bonav li.has-child {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCBTT37XQBlTDVQvOpM1SF71voFx3tMKDPawQrNfeZKZU6cNWCwNRk9-KEaXJ9PPzDeDWE1exq8vPyQJw-lkTNNXrvNyPLSUsmgUwV45THXWmgLndqzOwVYgo2xde6GtalGVdkRAKNa_L/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}
#bonav{max-width:950px;text-transform:uppercase;}
#bonav > a{display: none;}
#bonav li{list-style-type: none;position: relative;}
#bonav li a{display: block;color: #4285f4;text-decoration:none;}
#bonav li a:active{background-color: #c00 !important;}
#bonav span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}
#bonav > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}
#bonav > ul > li{width: 20%;height: 100%;float: left;}
#bonav > ul > li.home-icon{max-width:120px;}
#bonav > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#bonav > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}
#bonav > ul > li:hover > a,#bonav > ul:not( :hover ) > li.active > a{color: #333;}
#bonav li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}
#bonav li:hover ul{display: block;left: 0;right: 0;}
#bonav li:not( :first-child ):hover ul{//left: -1px;}
#bonav li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;}
#bonav li ul li a:hover,#bonav li ul:not( :hover ) li.active a{background-color: #333;}
@media only screen and ( max-width: 60em )
#bonav{font-size: 75%;position: relative;top: auto;left: auto;}
#bonav > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}
#bonav > a:after{top: 60%;}
#bonav:not( :target ) > a:first-of-type,#bonav:target > a:last-of-type{display: block;}
#bonav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#bonav:target > ul{display: block;}
#bonav > ul > li{width: 100%;float: none;}
#bonav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#bonav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}
#bonav li ul{position: static;padding: 1.25em;padding-top: 0;}
#bonav li ul{background-color: #f8f8f8;}
#bonav > ul{background-color: #f8f8f8;}
#bonav li ul a{border-top: 1px solid #f1f1f1;}
#bonav > ul > li > a{border-top: 1px solid #f1f1f1;}
}
Now find the line “<b:skin>… </b:skin>”. Click to expand. Paste the CSS code right above the “]]></b:skin>” as shown below:
Step 5: Now click on the “Save Template” button. Go to your blog. Refresh the page and you will see the drop down menu is working on your blogger blog. The navigation menu is tested and working properly.
Related:
If you are having any issue in the case of adding this pretty responsive drop down menu in your blogger blog then you can let me know by leaving a comment. I will try to resolve your problem. If you like my work then please share this post.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon