Genesis is the best platform to work with. It is fast, simple and SEO friendly. But there is one problem with almost all the Genesis Child Themes that their header menu is not responsive. It is very important for us to make our website mobile responsive as this is the mobile era and everything should be easily accessible from all devices. But when we open our website in smartphone or tablet then it looks bad that the header menu is not responsive at all.

techmuzz header menu responsive

So, we found one solution for this problem to help you to make your theme’s header menu responsive with just 2-3 scripts. It is quite easy to do the task. If you don’t have programming experience then don’t worry, you can still do this task easily.

Let’s get started then,

Step 1: Go to wp-content folder into your website’s root directory. I suggest to use software like CyberDuck, it helps a lot in this kind of works.

website root directory in cyberduck

Step 2: Now navigate to the path given below. Then Upload responsive-menu.js into js folder.

/themes/your-theme/js   (*If js folder is not there, then create one.)

js folder of metro pro theme in cyberduck

Step 3: Put this code in functions.php

And finally, place this code into style.css of your Genesis child theme.

Step 4: That’s it.

If everything goes fine, they have successfully made your header menu responsive. Try it by either resizing your browser window or open your site into smartphone or tablet’s browser.

If you find any problem while making your header menu responsive then feel free to ask in the comment section. We will be glad to help you.

Enjoy & Stay Techie…

About Swapna Lekshmanan

Avatar for Swapna LekshmananSwapna is a person obsessed with designing the web. She just keeps looking for chances to modify the websites to give them a better look and feel. Also being the Co-founder at TechMuzz, she is responsible for its unique aesthetics.

Pin It on Pinterest

Share This