Today, I will be showing you how to easily create a responsive sidebar navigation menu on a blogger blog.  The main objective of this tutorial is to make the blog looks more professional, easy navigation.
Let’s get started. The very first thing to do is add this CSS to the bead section of your blog:

  • Login to Blogger Dashboard and click on Theme, then click on Edit HTML and paste this code


<style type="text/css">
/*Main Navigation*/
/*Close Navigation Menu*/
.sidenav .closebtn{position:absolute;top:9px;left:0;padding:7px 0 0 10px;line-height:1}
.sidenav .closebtn a{color:white;font-size:25px;line-height:0}
/*Search Section*/
#searching{position:absolute;top:0;right:5px;padding:8px 8px 0 0}
#searching form{margin:0;padding:0}
#searching form input{border:0;border-radius:3px;padding:5px 8px;width:60%;float:right;opacity:0.5}
#searching form input:focus{width:90%}
#searching form:after{content:"\f002";font-family:FontAwesome;position:absolute;right:8px;padding:5px;color:#44443380}
/*Author Section*/
.background img{width:100%;height:100%}
.author-avatar,.author-title{text-align:center;margin:0 auto;position:absolute}
.author-avatar img{width:100%;max-width:70px;height:auto}
@media screen and (max-width:230px){#searching{right:0}#searching form:after{content:''}#searching form input{width:80%}.author-avatar{bottom:20px}.author-avatar img{max-width:50px}.author-title{bottom:15px}}
/*Main Menu*/
@media screen and (max-width:250px){.sidenav{font-size:12px}}
.sidenav li i{padding-right:5px}
.sidenav li a{padding:8px 8px 8px 15px;text-decoration:none;color:#716e6e;display:block;transition:0.3s;background:#fafafa}
.sidenav li ul.submenu{display:none;margin:0;padding:0}
.sidenav li ul.submenu li a{background:#4d5151;color:#bbb;padding-left:35px}
.sidenav a:hover,.offcanvas a:focus{color:#f1f1f1}
/*Social Media*/
.sosmed{position:fixed;width:100%;text-align:center;padding:10px 0;background:white;font-size:25px;max-width:250px;bottom:0;left:0;border-top:2px solid #9c9999}
.sosmed span.facebook a{color:#3b5999}
.sosmed span.twitter a{color:#55acee}
.sosmed a{color:#dd4b39}
.sosmed span.hidesosmed a{color:#de2fd6}

After adding this style to your template, now let’s include FontAwesome icons feature by:

<link rel="stylesheet" type="text/css" href=""/>

Now, you’re half way done and the last and final step is to add the navigation HTML into the blog template (preferably after <body>):

<div class='sidenav' id='Brainslodge'>
<div class='author-profile'>
  <div class='background'><img src=''/></div>
  <div class='author-avatar'><img src=''/></div>
<span class='author-title'>Iyanu Victor</span>
<div id='searching'>
<form action='/search' method='get'>
  <input name='q' placeholder='Search...' title='Search Content' type='text'/>
<span class='closebtn'><a href='javascript:void(0)' onclick='closeSideNav()' title='Close Menu'>&#10005;</a></span>
<ul class='menu'>
 <li><a href=''><i aria-hidden='true' class='fa fa-inbox'/> Home </a></li>
 <li><a href=''><i aria-hidden='true' class='fa fa-paper-plane'/> Technology </a></li>
 <li><a href='javascript:void(0)' id='submenu-1' onclick='showresponddiv('><i aria-hidden='true' class='fa fa-newspaper-o'/>Blog </a>
 <ul class='submenu' id='opensubmenu-1' style='display: block;'>
 <li><a href='#'>Updates</a></li>
 <li><a href='#'>News</a></li>
 <li><a href='#'><i aria-hidden='true' class='fa fa-heart'/> Browsing Tweaks</a></li>
 <li><a href='#'><i aria-hidden='true' class='fa fa-key'/> VPN </a></li>
 <li><a href='#'><i aria-hidden='true' class='fa fa-laptop'/>Contact</a></li>
<div class='sosmed' id='hidesosmed'>
 <span class='facebook'><a href='' title='Facebook'><i aria-hidden='true' class='fa fa-facebook-square'/></a></span>
 <span class='twitter'><a href='' title='Twitter'><i aria-hidden='true' class='fa fa-twitter-square'/></a></span>
  <span class='google'><a href='' title='Google'><i aria-hidden='true' class='fa fa-google-plus-square'/></a></span>
 <span class='hidesosmed'><a href='javascript:void(0)' onclick='document.getElementById(&apos;hidesosmed&apos;).style.display=&apos;none&apos;;return false;' title='Close Social Media'>&#10005;</a></span>
<span class='showmenu' onclick='OpenSideNav()' title='Open Menu'>&#9776;</span>
<script type='text/javascript'>
function OpenSideNav(){document.getElementById("Brainslodge").style.display="block"}function closeSideNav(){document.getElementById("Brainslodge").style.display="none"}function showresponddiv(e){var n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&&current!=t&&("none"),"none""block",current=t)"none"}var current=null;

You’re all set now.

Customizing the Sidebar

You must make sure the sidebar navigation takes the perfect look of your blog and that’s why you need to customize it.

  • To change each icon,  head to FontAwesome, find the preferred icon that suites your link best and then replace the existing one with the preferred one.
  • To Customize the Menu Icon:
    .showmenu {
    font-size: 25px; /*Increase or  decrease this to change the size of  ☰*/
    cursor: pointer;
    position: fixed; /*You can change fixed to static to just keep the navigtion from floating*/
    z-index: 999;
    top: 5%;
    left: 2%;
    /*To change the Navigation menu icon color, just add color: color code e.g*/
    color: #223b3c;
  • To Customize when the navbar is open, edit:
    .sidenav {
     height: 100%; /*height of the sidenav*/
     width: 100%;/*width of the sidenav*/
     position: fixed; /*position*/
     z-index: 9999;
     top: 0;
     left: 0;
     background-color: #fafafa; /*background color of the sidenav*/
     overflow-x: hidden;
     transition: 0.5s;
     max-width: 250px; /*the maximum area of the screen that should be cover*/
     display: none;
  • Changing the Author Name, Author Picture, Background:
    <div class='author-profile'>
    /*background area*/
     <div class='background'>
    <img src=''/></div>
    /*author icon/avatar*/
    <div class='author-avatar'><img src=''/></div>
    /*Author name*/
    <span class='author-title'>Iyanu Victor</span>

    You can also replace Author section to Blog Section, Just add your favicon in the Avatar area, a logo to Background area and Author Name with Blog Name.

  • Adding more Social icons: by default, the side-nav CSS comprises of just Google, Twitter and Facebook icons CSS and you can add more using font awesome and finally styling it with CSS. To add Instagram, all you have to do :
    .sosmed span.instagram a{color:#FF0000}

After then, in the HTML section, include the Instagram code

 <span class="instagram"><a href="#Instagram" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></span>

To make the side navigation show on mobile only:

<b:if cond='data:blog.isMobile'>
CSS HERE in head section
<b:if cond='data:blog.isMobile'>
HTML HERE in body section

You’re set now. If you encounter any issues when trying to set it up for your blog, make it known in the comment box below.
Don’t forget to share!

1 comment

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

  • hello i followed the instructions religiously and it worked very well in destop version. but in the mobile version, it shows only the search bar and social icons. how do i fix this pls