Docs

[GRCo]

Hello!

We are having a problem viewing bottom of the drop down (as there are many options in the drop down). On desktop viewing, the bottom of drop down is being cut off with out an option to scroll down.

Please advise how to customize so that all options can be viewed in drop down?

Cheers!

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[GRCo]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.masthead-inline .x-navbar .desktop #menu-item-370 .sub-menu {
    max-height: 500px;
    overflow-y: scroll;
}

Hope it helps 🙂

[GRCo]

Thank you very much! Works great for desktop.

However, now it appears there is an issue on mobile. When selecting drop down “logo” on mobile, it won’t allow to scroll down.

Please advise.

Greatly appreciate your assistance!

Cheers!

[Joao]

Hi There,

It won´t scroll down on your home page because there is not enough content, if you test with longer content it will allow you to scroll down as on the other pages.

Please check Shop page and you will see scrolling is working.

Hope it helps,

Joao

[GRCo]

Hello,

Based on your comment I believe there is a misunderstanding with my last post.

On navbar, if you click “LOGOS” (either on desktop or mobile phone viewing), you will see that you are unable to view bottom of drop down menu.

I have added the code provided from above by Thai, but this is not working.

Please advise how to view entire drop down menu when selecting on navbar?

Thank you!

[Rupok]

Hi there,

Sorry for the confusion. However you are using too many item for the submenu. In that case you should use Megamenus or UberMenu for better UX.

For the issue happening on mobile, it seems you are using a script that forcing the Navbar to be fixed on mobile as well but the code might have glitch. If you add such code/script, kindly remove this.

You can also try placing this if you think you are not using any code for that :

@media only screen and (max-width: 979px) {
.x-navbar {
  position: relative!important;
}
}

Hope this helps.

Cheers!

[Author]

Posts