Hi Guys, having an issue with Mega Menu displaying when the page is not fully populated. The menu overflow seems to be hidden? please see images below for an example of what I mean.
wow, we didn't saw anything like that before. And because we have never met with anything similar, we need url to your website so we can have a look on code. Only then we'll be able to tell you what could be the problem.
Ok, we see what happen. This is because you don't have any content and wrapper is too short. We didn't realized that someone will use such a large menu on page without content. However if you want to go with menu out of wrapper, then please use below css but then menu will also go out own wrapper on the right side which is not good. But unfortunately in this case there is no other solution.
Hmm, by using that solution it makes the page wrapper jump to the left on hover and still doesn't show anything below 'Chemical Skin Peel' on the left column. Hopefully all of the pages should have enough content on to not need me adding the overflow css code... are there definitely no other options? cant the mega menu wrapper/container be set to display over top of everything>?
This is unfortunately not possible what you need because header layout has been created the way where you are not able to do it. To do what you need, whole header must be rebuilt. But if you will fill the pages with content, then menu will show fine as on page which has been published.
Okay, thanks for the update, I guess I'll just have to make sure all pages are suitably populated so that the menu definitely shows. Perhaps an update for the next release?
If this will be possible as you ask then we'll be able to do it but with current options and header layouts it is unfortunately not possible. Thanks for understanding!
Comments
wow, we didn't saw anything like that before. And because we have never met with anything similar, we need url to your website so we can have a look on code. Only then we'll be able to tell you what could be the problem.
#Wrapper { overflow: visible !important; }