In my Enfold Child Main Menu I have a menu with several top level items and a few sub-menu items.
When I hover over the menu items that have sub items, the sub items appear too far down the page (for my taste) I’d like to be able to play with control of that.
I am using the menu that gets smaller as you scroll, so I am guessing I’ll need to know the adjustment for both states??
If you provide an example, could you also please explain how you made the calculation so I can play with having it flush against the bottom of the main items vs. perhaps 10px below?
ALSO: It seems like there should be some kind of indicator showing which items on the main menu have submenu items lurking beneath.
If there is a fairly easy way to enable that, I’d appreciate your help with that as well.
Hi Rhys!
Thank you for using our theme.
Can you give us a link to this page please? And maybe you can add some screenshots and point out, what exactly you want.
Then we can check and give you the correct CSS or JavaScript.
You can post it here as a private reply.
Regards,
Günter
Hi!
If you shorten your header size then it will update automatically. Or you can use some CSS like so to shorten it.
nav.main_menu > div > ul > li > a {
height: 44px !important;
line-height: 44px !important;
}
You may need to move the menu down a bit which you can do with this.
nav.main_menu { top: 20px; }
And add this to reset it’s position when you scroll down the page.
.header-scrolled nav.main_menu { top: 0px; }
Regards,
Elliott