How to Create Responsive Menu Sidebar Nav on Blogger

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">
.showmenu{font-size:25px;cursor:pointer;position:fixed;z-index:999;top:5%;left:2%}
/*Main Navigation*/
.sidenav{height:100%;width:100%;position:fixed;z-index:9999;top:0;left:0;background-color:#fafafa;overflow-x:hidden;transition:0.5s;max-width:250px;display:none}
/*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*/
.author-profile{width:100%;max-width:250px;position:relative}
.background img{width:100%;height:100%}
.author-avatar,.author-title{text-align:center;margin:0 auto;position:absolute}
.author-avatar{width:100%;height:70px;bottom:70px}
.author-avatar img{width:100%;max-width:70px;height:auto}
.author-title{bottom:40px;color:#fafafa;width:100%}
@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*/
.sidenav ul.menu{margin:0;padding:0;font-size:15px}
@media screen and (max-width:250px){.sidenav ul.menu{font-size:12px}}
.sidenav ul.menu li i{padding-right:5px}
.sidenav ul.menu li a{padding:8px 8px 8px 15px;text-decoration:none;color:#716e6e;display:block;transition:0.3s;background:#fafafa}
/*Submenu*/
.sidenav ul.menu li ul.submenu{display:none;margin:0;padding:0}
.sidenav ul.menu 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 span.google a{color:#dd4b39}
.sosmed span.hidesosmed a{color:#de2fd6}
</style>

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

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

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='https://brainslodge.com/wp-content/uploads/2017/08/brainslodge-1-e1502404994838.png'/></div>
  <div class='author-avatar'><img src='https://brainslodge.com/wp-content/uploads/2016/12/Ghic1-150x150.jpg'/></div>
<span class='author-title'>Iyanu Victor</span>
</div>
<div id='searching'>
<form action='/search' method='get'>
  <input name='q' placeholder='Search...' title='Search Content' type='text'/>
</form>
</div>
<span class='closebtn'><a href='javascript:void(0)' onclick='closeSideNav()' title='Close Menu'>&#10005;</a></span>
<ul class='menu'>
 <li><a href='https://brainslodge.com'><i aria-hidden='true' class='fa fa-inbox'/> Home </a></li>
 <li><a href='https://brainslodge.com'><i aria-hidden='true' class='fa fa-paper-plane'/> Technology </a></li>
 <li><a href='javascript:void(0)' id='submenu-1' onclick='showresponddiv(this.id)'><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>
 </ul>
 </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>
 
 
</ul>
<div class='sosmed' id='hidesosmed'>
 <span class='facebook'><a href='https://facebook.com/thebrainslodge' title='Facebook'><i aria-hidden='true' class='fa fa-facebook-square'/></a></span>
 <span class='twitter'><a href='https://twitter.com/thebrainslodge' title='Twitter'><i aria-hidden='true' class='fa fa-twitter-square'/></a></span>
  <span class='google'><a href='https://plus.google.com/+Brainslodge' 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>
</div>
</div>
<span class='showmenu' onclick='OpenSideNav()' title='Open Menu'>&#9776;</span>

<script type='text/javascript'>
//<![CDATA[
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&&(current.style.display="none"),"none"==t.style.display?(t.style.display="block",current=t):t.style.display="none"}var current=null;
//]]>
</script>

You’re all set now.

sidenav

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='https://brainslodge.com/wp-content/uploads/2017/08/brainslodge-1-e1502404994838.png'/></div>
    /*author icon/avatar*/ 
    <div class='author-avatar'><img src='https://brainslodge.com/wp-content/uploads/2016/12/Ghic1-150x150.jpg'/></div>
    /*Author name*/
    <span class='author-title'>Iyanu Victor</span>
    </div>

    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>

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

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!

Related Posts:

  • Namecheap 2018 Promo Code & Coupon
  • How To Enable Custom Fonts On Your Website or Blog
  • WordPress HTTPS and SSL: How to Setup
  • Free web hosting with domain and cPanel 2016
  • HostGator Review: 10 Reasons To Use Hostgator
  • Comment(s) for “How to Create Responsive Menu Sidebar Nav on Blogger”

    1. 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

    Leave a Reply

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