Blog

How to Add a Mobile Responsive Drop Down Menu in Blogger

Updated: January 23, 2017  |  Posted: March 10, 2015  |  By Andrei Pogorelov


Mobile Responsive Drop Down Menu in Blogger

In my previous blog post, I described how to add Drop Down Menu in Blogger. That post describes the basics for creating a menu and adding it to the desktop version of your blog. This post expands on this scenario by adding your existing menu to the mobile version of your blog.


Let's start

First of all, we need to take into account that Blogger uses a separate template for mobile layout. If your blog is opened on a mobile device, Blogger displays it in a compact view optimized for small screens. A mobile template has a logo, a simple drop down list for navigation, and the list with blog posts.

Our task is to make the current drop down menu user-friendly to mobile visitors and add it to the mobile template.


Step #1: Enabling the Responsive Menu Option

A responsive menu is such navigation component, which is user-friendly for both desktop and mobile users. How does it work? If the viewport width is less than the width of the menu bar, an alternate compact menu appears. So, the menu provides a quality experience for all of the users.

By default, the menu created in Drop Down Menu Generator is not responsive. To make it responsive, you should enable the "Responsive Menu" option under the "Options" tab. To be sure that the menu is responsive, open it in the preview window in Menu Generator and set the window width less than the width of your menu.


Responsive Menu Option


Step #2: Adding to the Mobile Template in Blogger

As you use Embed Code, your blog already has the responsive menu because any modification made to the menu in Menu Generator is immediately reflected in the menu on your blog.

Open Blog Layout and find the widget with your menu. In my example blog, the menu is in the "MyMenu1" widget.


Blog Layout


Next, click on the "Template" link and open the main template in HTML mode for editing. Find the "MyMenu1" widget and add the mobile='yes' code:

<b:widget id='HTML2' locked='false' mobile='yes' title='MyMenu1' type='HTML'> ...



Blog Layout

Now the menu widget is enabled for the mobile view.

Finally, click the Gear icon below the mobile template and choose the Custom Mobile Template. Click on the Preview button to see the mobile version of your blog which now displays your responsive menu under the header. That's All!


Custom Mobile Template

Conclusion

A single menu instance is used for both desktop and mobile versions of your blog. Any modification made to the menu for desktop users will be immediately reflected in the menu for mobile users.

If you have any questions, please use the Question Form.


Links

Blogger: http://www.blogger.com
Video Tutorial: Adding Mobile Responsive Drop-Down Menu in Blogger
Live Demo (responsive menu): http://dropdownmenugenerator.com/Demos/Responsive/Index.htm
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx






     Menu Generator  10/13/2017 (1685)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.
Uploading ...