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

Store Design
, , ,
1

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

where bototm of image is the bottom of the window
where bototm of image is the bottom of the window674×2626 165 KB

Full menu visible when whole page is reduced in magnification
Full menu visible when whole page is reduced in magnification760×2620 200 KB

Hello.

2

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

1 Like
3

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;
}
1 Like
4
  • Here is the solution for you @Sue_Lee
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • 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
BSSTekLabs_0-1720445136873.png683×740 357 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
5

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.

6

Hello, and many thanks for this.

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

Cheers.

1 Like
7

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.