How to Create a Responsive Dropdown Menu bar in Blogger

To create a responsive menu in blogger, you will need to add the following HTML, CSS and jQuery into your blog. How to add the following code in your blog, simply follow the below simple steps.

  • Login your blogger account and select a blog which you want to add this responsive menu.
  • Go to template >> edit HTML.
  • After opening your blog template all coding, search <head> and paste the below links just above it.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='https://codepen.io/thebloggerguide/pen/GjLRkY.js' type='text/javascript'></script>

Adding CSS code

After the completion of above step, now you need to add the below CSS code to your blog. To add this, first of all click on view code button and copy the all CSS code and then search ]]></b:skin> in your blog template and paste the copied code just above it.

View Code

Add HTML code

Adding HTML to your blog depend on you, where you want to appear menu in your blog. If you want to appear after the header, then find </header> tag and paste the below codes just below it.

<nav>
<a class="responsive-menu" href="#" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="https://www.thebloggerguide.com/"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>
</ul>
</nav>

Replace the # with your blog’s links and anchor text with your own anchor text. Now click on save template bottom. You have almost done.
Remember

  • If you are using the blogger mobile version template in your blog, first disable it by going. Select template >> click the gear icon & check on No. Show desktop template on mobile devices.
  • screanshot

Now view your blog with different devices. Hopefully, it will be working properly, if you are facing any problem about the adding  multi-level responsive menu bar in blogger then share with us in the comment section.

Leave a Reply

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