Hi mike,
Thanks for posting a link. Setting the Menu Height to 120px and the padding back to 0px, looks like the corrrect settings for your header.
Regards,
Tom
Hi @megatom
Thank you for your response. When I set the min height to 120px and remove all padding the menu sits vertically top aligned. I need it sit vertically middle aligned.
Sorry I wasn’t very clear last time around.
With the padding I added it works fine, but the padding is taking effect on the sticky menu too and pushing the menu down when sticky.
Hi Mike,
Ah, I see the issue is when the menu is sticky now. When I set the Menu Height to 120px and the Padding to 0px I see this:
https://app.screencast.com/mlZLrOQH17Y1L
Please can you make those changes, and leave it like that, and also enable the “Use Flex CSS” option in the menu theme? I will then write some custom CSS to fix the height of the menu when the header is sticky.
Regards,
Tom
@megatom – I have made those changes. If you could write something to fix sticky for me that would be awesome!
Hi Mike,
Thanks, getting there…
Please remove this block of CSS that has been copied and pasted into the Custom Styling area:
https://app.screencast.com/SBbO7dwthPm0f
Instead make sure the Menu Height is set in the Menu Theme itself, to 120px, and the Padding to 0. Then I will take a look at the sticky height again.
Regards,
Tom
Thanks @megatom I’ve now removed menu height and padding from the custom css and added it in the menu theme itself.
Hi,
Please can you remove the whole block? It is breaking the alignment of the text at the moment, if you remove it, it will look correct.
Then add this custom CSS:
.sticky-on {$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
min-height: 80px;
}
Regards,
Tom
Thanks @megatom – I’m getting this failure message when trying to save it
Error saving theme. Please try refreshing the page.
Warning: CSS compilation failed. Please check your changes or revert the theme.
parse error: failed at $wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link { (stdin) on line 1738, at column 13
Hi @megatom Just wondered if you managed to see my reply regarding the error message. Appreciate all your help on this 🙂
Hi Mike,
Sorry, there was a typo. Please try this:
.sticky-on #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
min-height: 80px;
}
Regards,
Tom
Perfect thank you for all your help! One last thing – is there a way to make the mega menu full height to the screen?
Hi Mike,
There isn’t sorry, not exactly. You could try the Minimum Height option here:
https://www.megamenu.com/documentation/fixed-height-mega-sub-menu/
But use something like 90vh for the value (90% of the height of the screen, as you need to account for the height of the header).
Regards,
Tom
Hi @megatom – for some reason, this morning, the mega menu is not appearing on hover. Any ideas?
@megatom – ive got it working. Ive changed it from hiver intent to hover
