Blog

WEBFI-WordPress-How to Create a Mobile Ready Responsive WordPress Menu



Do you want a mobile friendly menu for your WordPress site? Mobile users are getting more popular as time goes on and a mobile responsive menu makes it easier to navigate your site. In this video, we will show you how to easily create a mobile-ready responsive menu.

Text version of this tutorial:
http://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this tutorial:

The first method would be to install and activate the Responsive Menu plugin:

https://wordpress.org/plugins/responsive-menu/

Once activated the plugin will add a new menu item labeled Responsive menu to your WordPress admin bar that you should click.

Select the screen width when the menu should appear on your site, 800 the default is good for most sites.

After that select the menu you want to show, you can create a menu under Appearance, Menus.

A second method would be to install and activate the Responsive Select Menu plugin:

https://wordpress.org/plugins/responsive-select-menu/

Once activated you need to visit Appearance, Responsive Select to configure the plugin settings.

Scroll down to ‘Activate theme locations’ to modify where the menu is active.

If neither of those options are what you are wanting we have a method to do this through coding on our written article.

source

25 Comments

  • Omar KN on October 4, 2016

    nice !

  • falah soud on October 6, 2016

    You are so great thanks too much

  • free anime on May 7, 2017

    how to show member account in menu

  • Faizaan Gagan on June 13, 2017

    plugin does not worked
    visit: tjg.eduquiz09.com
    and make window to mobile size

  • Regina Clarke on November 25, 2017

    Exactly what I wanted–thank you so much!!!

  • Piano Music on December 21, 2017

    but how do i remove away the exisiting menu? now i have 2 menu

  • Star View Cottage on January 17, 2018

    Thanks!!

  • Rodrigo D’Agostino on November 30, 2018

    Always solving problems by installing a new plugin… I don't know what I would do without your priceless help (?)

  • Laura on February 18, 2019

    How can I hide the old menu from my WP theme, so that there is only shown the new mobile menu (which I made with this plugin) and not the old one?

  • Themba Maluleke on February 20, 2019

    does anyone know how to create a responsive menu on wordpress without using these my plugins….just code from scratch nd avoid pulling in many frameworks??????

  • Beth Tessier on March 7, 2019

    When I install this plug-in I get the menu option but instead of it showing options it is just a blank search bar. What am I doing wrong?

  • Harry Jon Hair & Makeup on August 12, 2019

    thank you!

  • Elize Elisma on October 22, 2019

    How can we we display some menu items and hide others in a hamburger bar on mobile?

    To anyone who can help me, thank you in advance you Send me a video here

  • Nadie te preguntó on November 29, 2019

    thanks!

  • nirosha s on February 24, 2020

    there are two menu when it is mobile responsive ………….

  • aleksandar peltekov on March 24, 2020

    I wasted a few hours trying to fixed the mobile menu on my web site,and you just solved my problem for less then 3 min.THANK YOU
    p.s.Thats my first youtube comments ever,just to show you my appreciation

  • Ranjana Sisodia on April 12, 2020

    Using the responsive menu, I could add the button, but I need to apply some additonal css to it to change its alignment and color, How to do that?
    Any css I add in addtional css, it doesn't get applied.

  • Primetime Promotions on April 25, 2020

    Hello, great tutorials as usual. I tried this and I ended up with Menus, on Desktop and Tablet. Any suggestions on a fix?

  • Bobi Saputra on April 25, 2020

    Unfortunately default menu style is still shown 🙄🙄🙄

  • Andrew Windsor on May 20, 2020

    Hi, I am a visually impaired WordPress Editor, I help maintain a charity website. I have two menu's on the website, one is the header menu, the other is page related and added to the pages required. I want to be able to make the menu mobile accessible and not take up two pages or menu items. here is the website link. Please can someone let me know what I should do? https://www.loudapplauserisingstars.co.uk/honorary-patron/ Thank you.

  • Mrhappybunny on August 22, 2020

    How is it that i can see all the menus on my phone when it's only 2 of them i wanted to see on the pc?

  • Shubham Beri on September 7, 2020

    Within 2 mins this video helped me in a way that hour long videos couldn't. Thanks a lot!

  • J M on October 5, 2020

    Very helpful this. Thanks!!

  • منوعات علي الدعيس on January 14, 2021

    thanks so much for that

  • balaji c on March 30, 2021

    Thank you

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

WEBFI NETWORK OFFICE HOURS 

Mon-Sun from 8:00 am /4:00 pm USA-ET

WhatsApp us

Small Business – WordPress – CPanel – Hosting

© Webfinet Affordable Private Small Business Solutions All Rights Reserved 2021 - Powered By Marquez.Group
error: WEBFINET SECURITY IS ON