I’m trying to make the submenu appear below the menu items, rather than below the header. I hat a big logo on my site which required a big transparent header to contain it. The trouble is that when I hover over the menu item, the sub menu appears at the bottom of the header, making it too far down the page. How can I solve this?
Thanks
Hey Swbride,
Try adding the following to quick css:
#avia-menu #menu-item-256{
height:130px!important;
}
Best regards,
Jordan Shannon
That’s done the trick pal!
One slight issue now is that there’s a gap when the menu shrinks. Can that be fixed?
Hi,
Can you provide a screenshot of the gap in question?
Best regards,
Jordan Shannon
sure… How do I do that?
Cool, here you go…
Hi,
Thank you. Which page is that from?
Best regards,
Jordan Shannon
home page. The menue appears when you hover over our collection
Cheers
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#header .six.units {
top: 88%;
}
Best regards,
Yigit
That still leaves a gap at 88% and if I make it small enough to close the gap (80%) it covers the menu items on the big header.
Would another solution be to enable the logo to overhang the header container? How would I do this?
Hi,
I sounds like the css provided would have to be adjusted based on media queries. Essentially, the % would have to be altered to fit the specific screen range. https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
Best regards,
Jordan Shannon