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


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

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>):

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:
  • To Customize when the navbar is open, edit:
  • Changing the Author Name, Author Picture, Background:
    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 :

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

To make the side navigation show on mobile only:

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
  • 3 Ways Fixed Header Content Can Improve Your Blog
  • 15 Things To Do Immediately After Installing WordPress
  • WordPress HTTPS and SSL: How to Setup
  • 5 Social Media Auto Publishing Tools For Bloggers
  • 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 *