Navigation Dropdown for long menus

[DesignMunky]

Hi,

I have a problem with long drop down menus in the main header getting cut off at smaller screen heights:

Australian Cardiovascular Specialists - Melbourne Cardiologists

Is there a way to enable the drop down menu to scroll down or up if it hits the bottom of the screen?

Darren.

[tristup]

Hi Darren,

I have checked your website on my Android mobile and found the problem you are describing in your posts related to the longer menu, but I was able to scroll down to check the full menu. There is no such option available, what you are trying to acheive in this case.

Thanks for understanding.

[DesignMunky]

Hi Tristup,

The issue appears on desktop, not mobile. What do I do about long dropdown menus that are longer than pages with little content?

Darren.

[DesignMunky]

Am I able to set a max dropdown length that will then scroll the bottom of the menu if it is longer than maximum?

[ruenel]

Hello @DesignMunky,

You can set 100vh as the maximum height. Just make sure that the Overflow is displayed.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[DesignMunky]

What element is being set in the screenshot above please?

[friech]

Hi @DesignMunky,

That screenshot is from a Dropdown element, one solution I see that can resolve your issue is to reduce the font-size a bit and spacing (padding) of the menu-items.

Cheers!

[DesignMunky]

This is a screenshot of the dropdown element that I see at my end. It does not have the Overflow or body scroll options that you show in your screenshot.

Reducing the font size & spacing is not a proper solution to this problem. What if the client needed to add more menu items in the future? I need to be able to show all menu items in a drop down, regardless of screen height.

Darren.

[tristup]

Hi Darren,

As per your screenshots, you might be using the Navigation Dropdown which you stated as Dropdown element. And my colleague has suggested you on the basis of the Dropdown element, which does have the options shown in the screenshot. Please let us know if you are using the Dropdown element and not able to see the options shown in my colleague’s screenshot.

Thanks

[DesignMunky]

Hi,

I’m using a Navigation Dropdown element - it’s the title of this topic.

Back then to my original problem. How do I deal with long sub menus that extend beyond the bottom of the page on desktop?

Darren.

[tristup]

Hi Darren,

The Navigation Dropdown element does not have an option for setting the height as the Dropdown element has. I would suggest you add the following custom CSS code and add it to the Customize > Element CSS of the Navigation Dropdown element.

$el
{
    max-height:100vh;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

If that does not resolve your issue, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[DesignMunky]

Hi Tristup,

I added the code as suggested and it didn’t seem to make any difference.

Can you please go in and have a look?

THanks,
Darren.

[friech]

Hi Darren,

Thank you for the credentials, I have updated the given CSS code to this:

$el #menu-item-98 .x-dropdown {
    max-height: calc(100vh - 144px);
    overflow-y: scroll;
}

The #menu-item-98 is to specifically target the ISSUES WE CAN HELP WITH menu item which has a long submenu. Needed to subtract a 144px to the 100vh to offset the height of the header.

That gives the sub-menu dropdown a vertical scrollbar. Unfortunately, even on big screens where the submenu does not overflow, the vertical scrollbar will still be visible. It will require a custom script to have a clean solution on this which regretfully outside of the support that we can offer.

Hope it helps,
Cheers!

[DesignMunky]

Hey Friech,

That’s perfect - exactly what I was looking for - thank you!

Darren.

[friech]

You’re more than welcome, glad we could help.

Cheers!