Return to previous page

Megamenu optimization for mobile version

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

buf

Participant

December 28, 2023 at 13:36

Hi, I’m trying to make a megamenu for my site, but I’m having trouble with the mobile optimization.

Here is how it looks in the desktop version: https://prnt.sc/0FOdulgok_Mc And here is how it looks in the mobile version: https://prnt.sc/lpukqUWZFQBo / https://prnt.sc/cie5k_ivHCna

As you can see, the image is not on the left, even when that option is already active and it is working perfectly in the desktop version.

How can I change this in order to take advantage of all the space on the screen in the mobile version? Because how it looks right now, it has a lot of free space and the user will have to scroll down a lot of lines to see all the content.

Thanks in advance.

Please, contact administrator
for this information.

#377919 Copied Theme version: 9.2.5 WooCommerce version: 8.3.1

9 Answers

Rose Tyler

Support staff

December 28, 2023 at 14:43

Hello, Buf,

We appreciate you contacting us with your inquiry about the megamenu on your website.

Regrettably, we are currently unable to access your site. We kindly ask that you verify the site’s status and ensure it is operational.

Regarding the megamenu, if it was constructed using a static block, it may only display properly on desktop devices. To enhance functionality across different devices, we suggest creating an alternative menu through the ‘Appearance’ section, then ‘Menus’, and subsequently selecting it via ‘Header Builder’ > ‘Mobile Menu’.

Should you require further assistance or have any additional questions, please do not hesitate to reach out.

Kind Regards,
8theme team

#377932 Copied

buf

Participant

December 28, 2023 at 16:20

Hi, I shared with you the staging URL of my site in the private area.

Please contact administrator
for this information.

#377955 Copied

Rose Tyler

Support staff

December 28, 2023 at 16:39

Hello, Buf,

Thank you for the URL, but our answer will be the same: Regarding the megamenu, if it was constructed using a static block, it may only display properly on desktop devices. To enhance functionality across different devices, we suggest creating an alternative menu through the ‘Appearance’ section, then ‘Menus’, and subsequently selecting it via ‘Header Builder’ > ‘Mobile Menu’.

If you have any other questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

#377961 Copied

buf

Participant

December 28, 2023 at 17:17

Understood.

I’ve created a new menu for the mobile version, but how can I create something like this: https://prnt.sc/uR8n8I4WfDn8

I don’t want just plain text, I want to have an personalized icon in the left as that site has.

Update: I’ve just seen that I can upload an image via Appereance->Menú to each element, but I can’t directly edit how it is shown. There is no space between the text and the image, and I would prefer the imagen to be on the left side of the text. How can I make that? https://prnt.sc/GF0jG6xQiTu-

Thanks in advance.

#377965 Copied

Rose Tyler

Support staff

December 29, 2023 at 08:44

Hello, Buf,

We appreciate your prompt response.

We have noticed that the menu depicted in the following screenshot is currently not visible on your website: https://prnt.sc/GF0jG6xQiTu-. We kindly request that you implement this menu, which will enable us to provide assistance through the application of custom CSS code.

Kind Regards,
8theme team

#378013 Copied

buf

Participant

January 1, 2024 at 12:07

Hi, thanks for your response.

I’ve uploaded again the image in order to show it in the menu.

Thanks in advance. Happy new year!!

#378180 Copied
Rose Tyler

Support staff

January 1, 2024 at 12:56
Hello, Buf,

We kindly request that you implement the following custom CSS code:
```
body .header-mobile-menu .menu .type-img {
    flex-direction: row-reverse;
    justify-content: start !important;
}
```
Should you require any further assistance, please do not hesitate to reach out.

Kind Regards,
8theme team
#378185 Copied
buf

Participant

January 16, 2024 at 14:47

it works!

Thank you so much!!

#380099 Copied

Andrew Mitchell

Support staff

January 16, 2024 at 14:48

Dear buf,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#380100 Copied
Tagged: megamenu optimization, mobile version, responsive design, seo friendly, website improvement, woocommerce templates, wordpress
Viewing 10 results - 1 through 10 (of 10 total)