Why isn't the menu working correctly on my website?

Shopify Discussion
1

I have noticed an issue on with the menu/navigation on my website customcamping.co.uk that wasn’t previously a problem.

The menu is not working correctly on both mobile and desktop:

desktop - can not select the sub-items in the drop down -see screen shot.

Mobile - page title text interferes with the menu and also, when clicking the sub items it opens up the image behind it.

Hopefully someone has an answer for this.

Thanks,

Simon

Screenshot_20230328_085915_Chrome.jpg
Screenshot_20230328_085915_Chrome.jpg1068×2299 79.9 KB

Screenshot_20230328_085959_Chrome.jpg
Screenshot_20230328_085959_Chrome.jpg1068×2309 96.7 KB

Screenshot (1099).png
Screenshot (1099).png1890×1121 399 KB

2

Hi @SimonButterwort ,

You can solve the issue by following this instruction

Go to store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css, add this code at the bottom, Save file and reload your page and check again.

.header-wrapper { z-index: 3 !important; }
3

Hello @SimonButterwort ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1679992777308.png
GemPages_0-1679992777308.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1679992805980.png
GemPages_1-1679992805980.png1278×878 57.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Hi @SimonButterwort ,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    z-index: -1;
}
}