Return to previous page

Mobile Footer Menu – Change Menu Sizing & Styling & Elementor Option for Offcanvas Main/Mega Menu

This topic has 5 replies, 3 voices, and was last updated 3 months ago ago by Andrew Mitchell

KSwan

Participant

January 7, 2024 at 22:03

Hello.

We’re also using the mobile footer bar, which is great, but we’re needing to change the styling of the “pop-up” menu that appears on mobile, as its too small.

1 – Alternatively, and preferably, we’d like to have this clickable as a “burger” icon that slides on the off canvas mega menu (mobile), but we can’t see the option to do this.

2 – We’d again otherwise revert to using the Elementor header for mobile, but again there doesn’t seem to be an option for the off-canvas menu as a module in Elementor.

Screenshots: https://snipboard.io/BY8dlz.jpg / https://snipboard.io/7qQFpY.jpg

Thank you.

#378984 Copied Theme version: 9.2.5

4 Answers

Tony Rodriguez

Support staff

January 8, 2024 at 08:40

Hello, @KSwan,

1) To address the concern of the “pop-up” menu being too small on mobile, we recommend implementing the Off-Canvas Menu for a more user-friendly experience. Here’s a step-by-step guide on how to achieve this within the XStore theme settings:

a)Navigate to XStore Theme Settings:

Log in to your WordPress admin panel.
Go to “XStore” in the left sidebar.
b)Access Mobile Panel Settings:

Within XStore settings, locate and click on “Theme Settings.”
c)Configure Mobile Panel:
Look for the “Mobile Panel” section and click on it.

d)Add a New Item:
Under the “Mobile Panel” settings, find the option to add a new item.

e)Select Element Mobile Menu:
In the dropdown menu for the newly added item, set the element as “Mobile Menu.”

Please refer to the attached visual reference in the provided image link:
https://imgur.com/a/INFA6D9

2) We hope this message finds you well. Thank you for reaching out to us regarding the challenge you’re facing with the Elementor header for mobile and the absence of an off-canvas menu module.

We understand the importance of having a seamless and customizable header for both mobile and desktop experiences. To address your concern, we recommend utilizing the powerful XStore Header Builder, which provides a comprehensive solution for creating custom headers tailored to your specific requirements.

With the XStore Header Builder, you have the flexibility to design headers separately for mobile and desktop, allowing you to achieve the desired look and functionality effortlessly.
To guide you through the process of using the XStore Header Builder effectively, we have prepared a detailed tutorial video. You can access the tutorial by following this link: https://www.youtube.com/watch?v=RbdKjQrFnO4

Kind Regards,
8theme team

#379001 Copied

KSwan

Participant

January 9, 2024 at 23:18

Hello.

We did this to change the option to mobile menu, but there is only an option to link to a page, but no visible area to link this “button” to an actual menu?

Regards,

#379398 Copied

Tony Rodriguez

Support staff

January 10, 2024 at 09:47

Hello, @KSwan,

In response to your concern about linking the mobile menu button to a specific page or menu, I would like to guide you through the steps to achieve this using Elementor and the static block.

a)Access Elementor for Static Block Editing:
Locate the static block you’re using for the mobile menu and edit with Elementor.

b)Edit the Slide with the Button:
Once inside Elementor, identify the specific slide containing the button you want to link.
Select the slide item and proceed to the content section.

c)Adding a Custom Link:
In the content section, you will find options for editing the slide content.
Look for the area where you can add a custom link – this is where you’ll input the destination page or menu URL.

d)Applying the Link:
After adding the custom link, ensure that you apply the link to either the entire slide or specifically to the button. This choice depends on whether you want the entire slide or just the button to be clickable.

f)Saving Changes:

Once you have configured the link, make sure to save your changes in Elementor.

By following these steps, you should be able to successfully link your mobile menu button to the desired page or menu. For a visual guide, please refer to the attached image https://imgur.com/a/aMPnN2I

Best Regards,
The 8Theme Team

#379445 Copied

Andrew Mitchell

Support staff

January 29, 2024 at 00:18

Dear KSwan,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#381461 Copied
Tagged: change menu sizing, mega menu, mobile footer menu, offcanvas main menu, styling & elementor option, woocommerce themes
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Mobile Footer Menu – Change Menu Sizing & Styling & Elementor Option for Offcanvas Main/Mega Menu’' has been successfully resolved, and the topic is now closed for further responses

Mobile Footer Menu – Change Menu Sizing & Styling & Elementor Option for Offcanvas Main/Mega Menu

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection