Responsive menu won't scroll in 'phone' mode

alan_sh · Post by **alan_sh** » Mon Dec 19, 2022 9:19 pm

This may be a non-issue, but...

I am using a responsive menu for my web sites (examples are https://gmnscouts.org.uk and https://penninescouts.org.uk). When on a desktop, I click on a menu item (e.g "Leaders" in the above examples) and I see the sub menu items.

However, when I am on a phone, with the hamburger menu showing, I click on 'leaders' and not all the sub menu shows as it has gone off the bottom of the screen. There appears to be no way to 'scroll' the sub menus up so I can get to the lower items.

This issue shows itself on a real phone and also when I resize a desktop browser to simulate it.

So, am I using the wrong type of menu? Or is this something that can be fixed?

Pablo, I will provide a small test .wbs file if needed. But I thought I'd ask here first.

Alan

crispy68 · Post by **crispy68** » Mon Dec 19, 2022 9:41 pm

Problem is there is no defined height to the drop down so no way to make is 'scroll'.

You could try adding some CSS like this:

Code: Select all

<style>
@media (max-width: 700px){
#wb_MResponsiveMenu3 ul{height:500%;overflow-y:scroll;}
}
</style>

The max-width value should match your breakpoint and set the height percentage to whatever you see fit. At 500%, this sets the dropdown portion to around 370px based on your page.

alan_sh · Post by **alan_sh** » Mon Dec 19, 2022 10:35 pm

Thanks Crispy,

Sounds exactly what I need.

Do I put that in the "Start of page" or "Between <Head>" bit?

And I assume the 'max width setting should match the 'breakpoint' value of the menu. Correct?

Alan

crispy68 · Post by **crispy68** » Mon Dec 19, 2022 10:44 pm

Do I put that in the "Start of page" or "Between <Head>" bit?

CSS almost always goes between the <head> tags usually

And I assume the 'max width setting should match the 'breakpoint' value of the menu. Correct?

Correct.

alan_sh · Post by **alan_sh** » Tue Dec 20, 2022 9:47 am

That seems to work, but 700% seems better than 500%.

Thank you.

www.wysiwygwebbuilder.com

Responsive menu won't scroll in 'phone' mode

Responsive menu won't scroll in 'phone' mode

Re: Responsive menu won't scroll in 'phone' mode

Re: Responsive menu won't scroll in 'phone' mode

Re: Responsive menu won't scroll in 'phone' mode

Re: Responsive menu won't scroll in 'phone' mode