Why does my 'shop by stone' drop down menu disappear on desktop?

Shopify Discussion
1

Hello,

The website is https://healingstonebeings.com/ and when I use the “shop by stone” drop down menu on desktop, it disappears as you start to scroll down. Any help would be greatly appreciated.

2

Hi @healingstones ,

You have multiple list of stones that is why. Try this code below. This will create 5 columns and will stay in the middle of the screen when opened.

  1. Go to Admin store > Online store > Themes > Edit code.

  2. Open the base.css file under the Asset folder. Then paste the code below.

#HeaderMenu-MenuList-3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: max-content;
    left: -210%;
}
3

Hi,

@made4Uo I have used the code and it has made my navigation horizontal which is perfect, but the list is long & it still disappears when you try to scroll to the bottom.

Please advise what code I need to make it stick or have the list items side by side

Store URL: https://webse.co.uk/

4

Hello! I am having this problem again for the following website https://healingstonebeings.com/

When I use the “shop by stone” drop down menu on desktop, it disappears as you start to scroll down. I went in to edit the code under “theme library” and it did not fix the issue.

Under Theme Library there are two: one named “Dawn” and one named “PageFly Assets”

Any help would be greatly appreciated.

5

Hi @healingstones

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

your problem is happening on the header, this part belongs to the theme so you can edit the code here.

PageFlyVictor_0-1676274640808.png
PageFlyVictor_0-1676274640808.png1670×845 133 KB

PageFlyVictor_1-1676274776679.png
PageFlyVictor_1-1676274776679.png1882×893 162 KB

Hope you find my answer helpful!

Best regards,

Victor | PageFly

6

Where within base.css do you drop in this code???

7

Hi Victor, Thank you for your response!! I’ve in put the code and it did not seem to fix the problem. You meant to put the following code under “base.css” correct? Or does it need to go under both “base.css” & “theme.liquid” ?

#HeaderMenu-MenuList-3 {
display: grid;
grid-template-columns: repeat(5, 1fr);
width: max-content;
left: -210%;
}