Trying to use a modal menu but am a little confused as to the implementation. I have a sticky nav bar and added a Navigation Modal element. Now there’s a burger in my navbar that triggers the modal menu. So far, so good. When you click the burger the modal menu comes in full screen. There’s an X in the corner of the modal menu to close it out. But the burger that I’ve just clicked does a cool little animation and turned into an X as well, but it’s now covered by the modal menu. I’d like to get rid of the X in the menu itself (which I can just do by making it transparent) but have a margin at the top of the modal menu so that my navbar isn’t covered by it. That way, the menu appears but leaves the nav bar uncovered so that I could close the modal menu by clicking the burger that has now transformed into an X. But I don’t see an option for margin. Am I missing it? Or would I need to add it as custom CSS. And, if so, what would I add?
Hi there,
Thanks for writing in! Can you please provide the URL of your site so we can take a closer look and suggest a solution accordingly?
Thanks!
Or I suppose a way to get the header to float on top of everything, so that the modal window goes behind it. That might be even better.
Hi There
Please add the following code to Theme Options CSS
.x-modal.x-active {
z-index: 99 !Important;
}
Hope it helps
Boom. You deliver again. Works perfectly. Thanks!
Glad we could help.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.