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.

Read:  5 Social Media Auto Publishing Tools For Bloggers

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.

Domain names for just 88 cents!
  • 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!

Domain names for just 88 cents!
This post was last modified on August 23, 2017

Iyanu Victor (BobodY) is a Student by appearance, Technology lover by heart and a Blogger by mind. He started blogging in 2015 and he has been surviving with your help. Thanks

Comments

  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 Comment

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