Return to previous page

Mega Menu created with Static Blocks does not allow scrolling

This topic has 16 replies, 2 voices, and was last updated 2 years, 6 months ago ago by Awais Ahmed

antonia

Participant

July 29, 2022 at 16:13

I’ve created a mega menu using a static block following your video in support.

On a smaller (laptop) screen you are unable to scroll within in the menu – scrolling is enabled for the website behind the mega menu.

Can you advise how I can resolve this?

#330694 Copied Theme version: 8.2.4 WooCommerce version: 6.7.0

15 Answers
Awais Ahmed

Participant

July 30, 2022 at 06:07
Hello, @antonia,

Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global Custom CSS.

.et_b_header-menu .menu li#menu-item-10395 .menu-static-block { left: 0 !important; }

The above code will shift your dropdown Menu left to middle and then you have to set the Mega Menu Container width from Appearance >> Menu by clicking on Mega Menu Item: https://postimg.cc/34pV38MT and make sure that your dropdown menu container width must be the same as your Menu has like: https://postimg.cc/DJVpj9SY

Regards 8Themes Team.
#330707 Copied
antonia

Participant

August 1, 2022 at 16:23

Hi,

Many thanks. I have implemented this code and width for the mega menu as you documented, but it still does not appear to be working correctly on the lap top I am using.

#330849 Copied

Awais Ahmed

Participant

August 2, 2022 at 05:52

Hello, @antonia,

I can see you have set the width as 1000px, and that is also too much for the laptop screen sizes, actually, for perfection, you have to set the width as 738px so that the complete dropdown menu box will appear under the complete menu width like this: https://postimg.cc/w3cp4Rw6

So try to change the width as 738px and check back your site after clearing the browser cache.

Otherwise please share your site WP Admin URL and Credentials with me in a private content area of this topic and also please let me know your laptop screen size as well on which you are facing this issue, so that I’ll check and help you out further.

Regards 8Themes Team.

#330858 Copied

antonia

Participant

August 2, 2022 at 20:49

Hi, thank you. I’ve updated the width and cleared the cache however I am still having issue with not being able to view the bottom of the mega menu. I am using a laptop with a 13.3 inch screen. Details shared as requested. Thank you.

Please contact administrator
for this information.

#330927 Copied

Awais Ahmed

Participant

August 3, 2022 at 07:01

Hello, @antonia,

The mega menu is coming from the static blocks named “Shop Mega Menu” I have checked it you set the menu in it with 4 columns and the content is more than 4 columns on the first and second columns there are two main menus with the sub-menus so the content appears bigger than the screens if you set the full width of the menu it will not helps so you have to set the 6 columns in it like I did on your site and set the full-width dropdown menu from the theme options now the result appear like this: https://postimg.cc/QFv1w8J0 and the block I set 6 columns see image: https://postimg.cc/PNksh1qk I hope you understand. Please check back to your site after clearing the browser cache.

Regards 8Themes Team.

#330938 Copied

antonia

Participant

August 3, 2022 at 08:30

I followed the instructions for the mega menu in this HELP guide for static blocks which uses 4 columns https://www.8theme.com/documentation/xstore/menu-set-up/mega-menu/ so I could have the exact same layout. Is this not possible?

With the 6 columns, I have now cleared the cache and now note the new very wide menu, however, it now no longer functions properly.

When I hover over “Shop” it appears, when I move to click an item it disappears so I cannot click any of the items.

#330951 Copied

Awais Ahmed

Participant

August 3, 2022 at 08:43

Hello, @antonia,

1) Actually, in the document we added 4 columns just for an example to understand how to set the mega menu nothing else. You can set the columns as per your need based on the menu items you have.

2) Issue resolved now kindly check back to your site after clearing the browser cache. See this image to know how I fix it and the result appears now: https://postimg.cc/zHGWGLK0

Regards 8Themes Team.

#330952 Copied

antonia

Participant

August 5, 2022 at 09:56

HI, thanks for coming back to me I can now access the mega menu but it still isn’t working correctly.

I created a 4 column menu which has now been hidden a new 6 column menu added. I assume this was your work.

Whether I use 4 or 6 columns I still cannot scroll the menu – this screen record shows the right-hand side scroll bar moving but the menu does not move to show Sugar Sprinkles 2 option under Sugar Sprinkles in the 3rd column https://shanem60.sg-host.com/wp-content/uploads/2022/08/soaposh-issue.webm.

#331140 Copied

Awais Ahmed

Participant

August 5, 2022 at 11:17

Hello, @antonia,

The 6-column menu was added by me to solve your issue. with the 6 column, there is no need to scroll the menu it appears just fine see image: https://postimg.cc/2VBJyQLS
Please check back to your site after clearing the browser cache.

Regards 8Themes Team.

#331146 Copied

antonia

Participant

August 10, 2022 at 15:19

Hi, yes it works fine on a wide screen but the issue is with smaller size screens as I’ve previously said.

Whether it’s 4 or 6 column is irrelevant I cannot scroll to get to all the content in the mega menu i.e. Sugar Sprinkles 2 under Sugar Sprinkels.:
http://shanem60.sg-host.com/wp-content/uploads/2022/08/Error-with-mega-menu.png

Incidentally, i have exactly the same issues on your demo stores, so I assume your theme is not responsive for these smaller lap top sized screens which is disappointing. Even if it failed over into a mobile menu it would be preferable.

Is there anything else you can suggest to resolve this issue on smaller screen sizes i.e. 13.3 inches?

#331463 Copied

Awais Ahmed

Participant

August 11, 2022 at 06:38

Hello, @antonia,

I am checking and testing your site on a 13-inch laptop which has a resolution of “1366px” and your site is working fine on it please first check the image: https://postimg.cc/XpYVkTRR

Now just let me know the resolution of your device on which you are facing the issue. Please don’t tell me the inches but tell me the display resolution in pixels so that I’ll check with the particular pixels device as well.

Regards 8Themes Team.

#331514 Copied

antonia

Participant

August 11, 2022 at 09:09

Hi – this image shows http://shanem60.sg-host.com/wp-content/uploads/2022/08/display-resolution.jpg the recommended settings which are:

Scale and Layout 150% (recommended)
Display Resolution 1920×1080 (recommended)

Thanks

#331530 Copied

Awais Ahmed

Participant

August 11, 2022 at 10:48

Hello, @antonia,

The thing is our theme is based on standard media queries like you read below.

Desktop (From 992px)
Tablet (from 768px to 991px)
Mobile Landscape(from 481px to 768px)
Mobile (from 0 to 480px)

Your issue appears on the desktop because when you scale 150% at 1920px resolution it’s something like between 1000px to 1280px and the mega menu you have has too many menu items in it so it’s not possible to show all of them on the smaller screen resolutions devices like 1280px or 1040px so I have set the desktop menu appears from the 1280px and less then this resolution the mobile menu will appear.

This is the only possible way to solve the issue and I hope you understand.

Please check back to your site after clearing the browser cache.

Regards 8Themes Team.

#331542 Copied

antonia

Participant

August 11, 2022 at 11:52

Hi, ok this makes sense but then the mega menu isn’t stacking correctly, so I assume I need to go back into the static block and resolve in the responsive section?
http://shanem60.sg-host.com/wp-content/uploads/2022/08/mobile-menu-issue.jpg

it is working fine on a mobile and tablet.

#331545 Copied

Awais Ahmed

Participant

August 12, 2022 at 05:58

Hello, @antonia,

It is working fine on mobile and tablet. Now, it is also working fine on the desktop as you can see in the image: https://postimg.cc/LYxxWZG2

Please check back to your site after clearing the browser cache. I hope you will never face any issues.

I added this line of code in the theme options >> theme custom CSS to solve your issue: https://postimg.cc/JsjPLFST

Regards 8Themes Team.

#331590 Copied
Tagged: best selling woocommerce themes, mega menu, no scrolling, persuasive, static blocks, user friendly
Viewing 16 results - 1 through 16 (of 16 total)