Dawn theme is cutting off the bottom of a long drop-down menu item

Solved

Dawn theme is cutting off the bottom of a long drop-down menu item

Sue_Lee
Excursionist
21 0 6

I have a greetings cards website (www.pennychoo.com) that uses the Dawn theme and the Shop By Range menu is cutting off the bottom menu items because it's so long. It is possible to make them all visible by reducing the overall magnification (cmd - ), but I can't afford to assume that all visitors will know to do this so am trying to find a way around it.

 

I can't remove any of the ranges from the list without potentially losing sales. The only thing I can think to do is to have a collections page where you click through to each range, but this adds an extra step to the process and I'd ideally like to keep the simplicity of clicking straight through from the drop down. I'm thinking that maybe nesting menu items may be the only solution but would be interested to hear of anyone knows of a better one?

 

Thanks

Soo

 

1.jpg2.jpgHello.

Accepted Solution (1)

BSS-TekLabs
Shopify Expert
450 144 158

This is an accepted solution.

- Here is the solution for you @Sue_Lee 
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.header__submenu.list-menu list-menu--disclosure {
     overflow-y: scroll !important;
    max-height: 55vh !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1720445136873.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

Tal19
Shopify Partner
116 19 18
 

For easier navigation and UX-wise, I think it would be better to add more grouping to this list

Need Shopify Development, Customization, or POS Support? PM Me!
Sue_Lee
Excursionist
21 0 6

Hello – thanks; do you mean nest the items in smaller groups? That's what I've done for now (A-P / S-Z) , which is fine, and works, but I was hoping I might be able to add a scroll bar but it looks like that'd mean adding code which I'm not really au fait with. 

Raj-webdesigner
Shopify Partner
316 73 74

I think This is Usefull For You.
This Code Is Scroll Your Long Menu.

Add This code Edit Code > base.css File

 

ul.header__submenu {
    max-height: 60vh;
    overflow-y: scroll;
}

 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


BSS-TekLabs
Shopify Expert
450 144 158

This is an accepted solution.

- Here is the solution for you @Sue_Lee 
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.header__submenu.list-menu list-menu--disclosure {
     overflow-y: scroll !important;
    max-height: 55vh !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1720445136873.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Sue_Lee
Excursionist
21 0 6

Hello, and many thanks for this.

One question: would I have to add the code each time the theme gets updated?

Cheers. 

BSS-TekLabs
Shopify Expert
450 144 158

You just need to add the above code again when you change to new theme, if the above code does not work when changing to new theme then you can ask me for help.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency