Solved

The main menu keeps disappearing when scrolling down with Crave theme

Dev71
Visitor
2 0 0

Hey,

I'm using the crave theme. 

 

Currently, there are a lot options in my main drop down menu. When I scroll down to see the remainder of the options, the menu disappears and I can never access the remaining options. This only happens on desktop. Mobile version has a slightly different menu on the side that works perfectly.

 

Can I please get some help with this? If the scrolling issue is too hard to fix, how can I make the drop down menu into multiple columns? 

 

Here is the website: https://salisburyflowershop.com.au/

 

I'm using the Crave theme and help would be greatly appreciated. Thank you!

Accepted Solution (1)

theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @Dev71 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
.header__submenu[tabindex="-1"]{
  max-height: 80dvh;
  overflow-y: scroll;
}
body:has(details[open="true"]) {
  overflow: hidden;
}

.header__submenu::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #FFFFFF;
}

.header__submenu::-webkit-scrollbar
{
	width: 3px;
    height: 50px;
	background-color: #FFFFFF;
}

.header__submenu::-webkit-scrollbar-thumb
{
	background-color: #555555;
	border: 2px solid #555555;
}


</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 2 (2)

theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @Dev71 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
.header__submenu[tabindex="-1"]{
  max-height: 80dvh;
  overflow-y: scroll;
}
body:has(details[open="true"]) {
  overflow: hidden;
}

.header__submenu::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #FFFFFF;
}

.header__submenu::-webkit-scrollbar
{
	width: 3px;
    height: 50px;
	background-color: #FFFFFF;
}

.header__submenu::-webkit-scrollbar-thumb
{
	background-color: #555555;
	border: 2px solid #555555;
}


</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Dev71
Visitor
2 0 0

Thank you so much!!! It worked 🙂