[Support request] sticky menu covers media

[Jeff]

How do I make it so the sticky menu doesn’t cover the top of pop ups like the location switcher on my site and the listing images. the menu is blocking important information in both of those cases so i’ll have to turn it off. But, I was really loving it otherwise.

[Ying]

Hi Jeff,

Try this css:

.modal {
    top: 10%;
}

[Jeff]

Nice, that seemed perfect everywhere. But, that CSS pushed my image gallery down making the bottom of my images disappear.

Ideally there would be a more proper way to handle this not pushing elements down gut instead putting the navigation behind the popups. Maybe something to do with z order. Maybe I need to ask the develops of the plugins that have the popups being foiled by the navigation.

Then there’s also the problem with menu in landscape when there’s a popup. The menu takes up too much real estate in that one instance.

Other than that the sticky menu is very nice and would improve my website a lot because I want the menu bar to be accessible as they move around. But, I’ll have to turn it off for now and remove this css…

[Fernando]

Hi Jeff,

Would you be able to start a Staging site, and activate the Sticky Nav there so we can observe and assess what needs to be done?

If so, let us know.

[Jeff]

Sure, do you need login credentials?

[Fernando]

Yes, that would be great!

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Jeff]

https://wordpress-903318-3168961.cloudwaysapps.com/

if you scroll down to trigger sticky menu and then select the location switcher from the navigation the location switcher is behind the the sticky nav.

When I apply the provided css it pushes down the image lightbox in the listings causing the bottom of images to be off screen. And the image still is being covered by the sticky nav, covering the X to close the image.
Staging listing example:
https://wordpress-903318-3168961.cloudwaysapps.com/online/peace-advocacy-network/

Live site without the sticky nav and without the css listing:
https://veganlinked.com/online/peace-advocacy-network/

[Jeff]

Private information

[Fernando]

For clarity, can you take a screenshot of the issue from your end? Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Moreover, what are the steps to make the modal appear?

[Jeff]

If you don’t understand my explicit and clear instructions on how to easily replicate this we may be wasting our time here… And this doesn’t give me much hope for more serious issues. I’m a video guy though, so maybe I’ll spend more energy on this later by sending you a video. That would be easier than trying to explain things via the time consuming tedium of screenshots.

Really though, the easiest thing may be to ask for a refund and just leave the site as is. Not because of this, just because I’m having a hard time getting started in the best direction. I setup the site using the free version. I simply wanted to control the padding a little more on certain parts of the site but it’s almost as if I’m going to have to recreate the entire site to use premium and maybe even pay for GP blocks too and I honestly don’t have the energy to do all this just to have a miniscule amount more of control right now. Esp. if it’s going to be hard to find the best way to start, esp. if being as explicit as I have been for this isn’t enough.

But, maybe when I send a video, which is the easiest for me, you’ll be able to swiftly understand. And if this is the preferred way of sharing my inquiries then maybe that will be enough to persuade me to try and do more with GP Premium.

I love GP thus far and the tutorials are decent. I just don’t see them as organized well (not in playlist is just one example of organizing instructional videos) and good for getting the overall gist of GP for starting out the way I have, building on the free and moving into premium. And coming from the tormenting, excruciatingly difficult GeoDirectory garbage I’m just exhausted.

I’m so close though to having something tight and right I may try to keep muscling through learning GP Premium. This menu is super minor in the grand scheme of things. I really do love it though. It could be a very nice touch to my site.

[Ying]

Hi there,

Looking at the reply here: https://generatepress.com/forums/topic/sticky-menu-covers-media/#post-2522452

Which image gallery are you referring to? The location pop-up is using position: fixed, so it should not affect other elements on the site.

Let me know!

[Jeff]

Like I shared already, the “image lightbox in the listings”. The staging and live example’s I shared, of course, for the image to popup one must click on the image. Did anyone try anything I suggested?

Staging listing example:
https://wordpress-903318-3168961.cloudwaysapps.com/online/peace-advocacy-network/

Live site without the sticky nav and without the css listing:
https://veganlinked.com/online/peace-advocacy-network/

[Jeff]

Here is a video demonstrating what I thought would be easy to see and not necessary to demonstrate in a video:

[David]

Hi there,

ok, so the CSS provided here:

https://generatepress.com/forums/topic/sticky-menu-covers-media/#post-2519184

Will need to be removed.

And the alternative would be to bring the modal in front of the sticky nav:

.modal {
    z-index: 10000000;
}

There isn’t a whole lot more that can be done, without hacking at the Modals styles to try and reduce the amount of screen it occupies.

[Jeff]

Excellent, I thought z-index might do the trick. It’s appears to be exactly what I needed. I’ll try it on the live site and test on mobile a little later, thanks for putting up with me! I’ll try to follow up 🙂

[Author]

Posts