For many reasons, your Menu may not be working in mobile view of your site. Do not worry at all. It’s an easy fix. In this post, you’ll learn how to make your menu button work perfectly on mobile view especially if you are using the Astra WordPress theme.
First, please understand that this method only works for WordPress sites only.
Step 1: Set Menu
Before anything else, make sure you have set your menu appropriately.
If you have not, set and arrange your menu. Appearance -> Customize -> Menus -> Create new Menus (or modify existing one.)
In case, you want to modify an existing one, follow the navigation direction above and then you’ll see something like this:
Please make sure you have a predefined menu you’d choose for mobile view. In most cases, the same menu used for Primary menu are used for Mobile.
Once you’ve identified what menu you plan to use for mobile view then you’re good to go to the next step.
Step 2: Manage All Menu Locations
Now, you need manage all menu locations.
Follow this navigation process: Appearance -> Customize -> Menus -> View All Locations. You’ll then see something like this:
First, select your Primary. This is for desktop view though on Astra WordPress theme. However, for mobile view, you’ll need to click the dropdown of Menus under “off-Canvas Menu”. Simply select your desired Menu for Mobile view here.
Hit the publish button to save your menu changes.
Step 3: Customize Menu Toggle Button
For some reasons, your Menu may still not be working on Mobile view at this point. To fix it, make sure you are on the Menu page (Appearance -> Customize -> Menus -> View All Locations).
Next, ensure you switch to mobile view.
Now, you’ll need to click that edit button to at the top of the Menu icon.
After that, you’ll see something like this:
Simply click the “+” button under the OFF CANVAS section then select “off-canvas Menu”. Don’t forget to publish to effect your changes.
The off-canvas Menu is already added in the above screenshot but in most cases, you’ll have to add it yourself as explained above.
After this, you menu should be working fine on mobile. However, to confirm, you’ll need the last step.
Step 4: Test Mobile Menu
To test if your mobile menu is now working, make sure you are still on the mobile appearance view. Next, click the mobile Menu Icon (not the edit button).
Then you’ll see something like this:
If you see something like this, it simply means, your menu is now working on mobile view.
Another way to test if your Menu is working on mobile view is to visit your website from your smartphone. It may be better to use a private browser like Incognito.
If your mobile Menu is still not working, you may need to clear cache on your website or CDN platform to fetch the latest version of your website.
The above method works if you use Astra WordPress theme and your menu is not working on mobile view.
Simply follow these steps above to fix it. Or you could watch this video:
Let me know if this method works for you.
You could also read other resourceful guides on Digital Acce: