Add a responsive dropdown menu To Your Blog on blogger | Blogtrovert

Add a responsive dropdown menu To Your Blog on blogger

May 28, 2017Joseph O.

This responsive dropdown menu for blogger blogs will definitely make your blog look stylish and professional, to say the least.

Initially, I had a horizontal menu display which kind of took a good amount of space in my blogger blog’s mobile view.

Originally gotten from mybloggerlab, I only made minor tweaks by adding the social bar and search box as well as making it sticky.

Below are the features of this menu

Responsive – this menu is very responsive and doesn’t take much space in your blog. If you use the default blogger template, a switch between desktop and menu view leaves you with the desktop and mobile menu respectively.

Light weight – this menu for the health of your blog is light wight and loads instantly with your blog.

Note; This dropdown menu doesn’t have sub-menu thus not suitable for those in search of a menu bar with sub-menu and you may have to continue your search!

All the same, this menu is perfect!

How to add the Responsive dropdown menu with social and search box to blogger

Before you take more steps, please back up your template, in case you make some unknown mistakes.

Need a Demo? Check it out

Step 1- Adding the CS
Search for ]]></b:skin>, then paste the CSS code below just above it.

/*** Dropdown Menu***/
#nav-wrapper {
margin:0 auto;
position: fixed;
width:100%;
float: none !important;
top: 0px;
padding-bottom: 5px;

z-index: 1;
height: 20px;
border-bottom: 1px solid #fafafa;
}
#nav-trigger {
display: none;
text-align: left;
}
#nav-trigger span {
display: block;
background-color: #000;
cursor: pointer;
text-transform: uppercase;
padding: 0 25px;
color: #EEE;
line-height: 50px;
}
nav#nav-mobile {
margin: 0px;
}
nav {
margin-bottom: 30px;
}
#nav-main {
background-color: #000;
float: left;
width: 100% !important;
}
#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
#nav-main li {
display: inline-block;
float: left;
ont-family: ‘
Open Sans’
, sans-serif;
}
#nav-main li:last-child {
border-right: none;
}
#nav-main a {
padding: 0 25px;
color: #EEE;
line-height: 67px;
display: block;
}
#nav-main a:hover {
background-color: #edbf9d;
text-decoration: none;
color: #fff;
}
#nav-mobile {
position: relative;
display: none;
}
#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #000;
z-index: 10;
padding: 0px;
border-bottom: solid 1px #171717;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile ul {
padding: 0;
margin: 0;
}
nav#nav-mobile a {
display: block;
color: #fff;
padding: 10px 0px;
text-decoration: none;
border-bottom: 1px solid #3a3a3a;
text-align: left;
}
nav#nav-mobile a:hover {
background-color: #111;
color: #fff;
}
nav#nav-mobile li {
display: block;
}

READ:  How To Stop Running A Mediocre News Blog

nav#nav-mobile {
display: none;
}

@media all and (max-width: 900px) {
#nav-trigger {
display: block;
}
#nav-main {
display: none!important;
}
nav#nav-mobile {
display: block;
}
}
@media screen and (max-width : 699px) {
#nav-wrapper {
width: 100%;
margin : 0em;
padding: 0px;
}
}

You can make some major changes by replacing the #000 background-color with your desired colour. This will change the look and feel of your menu bar.

Step 2- Adding the HTML code

To add the menu, go to the html of your theme and search for </header> now add the html code below immediately after/below it for better results, you can as well search for <header> and place the code below before/above it if you want your menu list to appear before your header.

<div id='nav-wrapper'>
<nav id='nav-main'>
    <ul>
    <li><a class='homer' href='#'><i class='fa fa-home'/> HOME</a>
    </li>
<li><a href='/p/about.html'>About</a>
</li>
<li><a href='/p/contact.html'>Contact</a></li>
<li><a href='/p/copyright.html'>Copyright</a></li>
<li><a href='/p/privacy.html'>Privacy Policy</a></li>
<li><a href='/p/disclcoder.html'>Disclaimer</a></li>
<li><a href='/p/terms.html'>Terms</a></li>  
  </ul>
</nav>
<div id='nav-trigger'>
    <span><i class='fa fa-list fa-2x'/></span>
</div>
<nav id='nav-mobile'/> 
</div>

Please replace page links with the correct links in your blog if necessary. You can add more links by

editing and pasting this <li><a href=’LINK HERE’>LINK TITLE</a></li> below </ul>

Step 3- Adding the JavaScript code

Now search for </body> and paste the code below just above it.

<script type='text/javascript'>
//<![CDATA[
$undefineddocument).readyundefinedfunctionundefined){
    $undefined"#nav-mobile").htmlundefined$undefined"#nav-main").htmlundefined));
    $undefined"#nav-trigger span").clickundefinedfunctionundefined){
        if undefined$undefined"nav#nav-mobile ul").hasClassundefined"expanded")) {
            $undefined"nav#nav-mobile ul.expanded").removeClassundefined"expanded").slideUpundefined250);
            $undefinedthis).removeClassundefined"open");
        } else {
            $undefined"nav#nav-mobile ul").addClassundefined"expanded").slideDownundefined250);
            $undefinedthis).addClassundefined"open");
        }
    });
});
//]]>
</script>

And that’s it…

Save your template, check your blog and enjoy! Encountered any problem?

Let me know in the comment box.

Did you enjoy this article?

Don't miss out on our new content. Sign Up!

Prev Post

How to center your blog header on blogger

May 27, 2017

Next Post

DIY Favicon creation for your blog

May 28, 2017

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from us

You have Successfully Subscribed!