Limelight Menu Button Issue

Hello! Question - I am using a fullscreen limelight modal for a navigation (at all browser sizes, not just mobile). I have the limelight menu button currently in a fixed Source nav bar, in the CTA space. No matter what I do, I can’t get the limelight menu button/hamburger to remain on top of the modal - it is not visible when the modal is open. I have tried playing with z-index unsuccessfully. Any ideas? I thought perhaps the issues is that the nav bar is fixed, but I can’t really understand why that would matter.

Thanks in advance!

A full screen modal covers the full screen.

Without more details such as a link it will be difficult to alter this to the way you expect your design to work.

I have done this type of navigation with a CTA burger triggered menu many times and I use PopDrop instead of LimeLight

Hi @msammartano

If you set the z-index of the Source menu to 9999 then it will remain in front of the Limelight modal background.

You can however make it a lot nicer by fading out the rest of the menu items and just leaving the toggle when the modal is open (this is the way the BWD site menu works.

Like this:
(I’ve just put an image in the Limelight rather than building a modal menu but you get the idea)

I’ve made a very simple demonstration project for you with a few lines of CSS in the site wide CSS code in RW to fade out the rest of the menu bar while the limelight is open.

Remember to also turn off the close icon in the Limelight settings as we don’t want that on top of the LL Menu launcher hamburger.

Here is the project file:

1 Like

This is great - thank you so much! One more question, though, in your opinion, if I’m not using the standard rapid weaver navigation in the Source Nav, only the CTA limelight, would I be better off just sticking the limelight button in a 2 column stack to replicate the look of a fixed menu bar? I’m thinking this approach would result in a smaller file size as I would be using any of the nav functionality of the nav bar? Does this make sense?

If you just want a bar with a fixed shadow and a hamburger in it then yes you could do that with a two column that you set to position fixed and add a shadow with CSS - it depends on what appearance you want the bar to have. (I’m presuming that you want a site title on the left hence a 2 col?)

The other advantage of using a 2 column setup rather than the source menu is that you won’t need to hide all the content and deal with the mobile hamburger from that menu if you are just using the Limelight one.

Without seeing your exact setup though it is really hard to give a balanced view on it.

The source menu is far from heavyweight though so it’s not much to worry about in the overall scheme of things. That said, if you are just using it to house the site title then the column approach would certainly be more sensible.