[Support request] CSS sticky menu is not working in desktop

[Irene]

Hi,

I wish to avoid JQuery

I tried the following CSS pasted in the Customizing>Additional CSS

#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
}
#mobile-header {
    position: sticky;
    top: 0;
}

Its not working with the Desktop menu.
What am I doing wrong?
Thanks

[Ying]

Hi Irene,

As you are not using the use navigation as header option, the #site-navigation selector won’t work.

Try replace it with .site-header.

[Irene]

Hi Ying,

The CSS worked well in 2 subsites /en and /es: here the cover image is an element
In the main subsite the Off Canvas Panel displays behind the cover image: here the cover image is in the page.
If you scroll the menu disappears behind the image and reappears when the image ends.
Thanks

[Irene]

Hi Ying

Sorry, when I said Off Canvas Panel I mean drop down menu

I tried with the z-index of the image container to send it to back, but I couldn’t make this work.

I have another question:
If I disable the menu plus module, will the drop down still work?
The menu plus module is handling the burger mobile menu?

[Ying]

You can addz-indexto your CSS:

.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}
#mobile-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

If I disable the menu plus module, will the drop down still work?

Yes.

The menu plus module is handling the burger mobile menu?

No, it’s for off canvas menu/navigation as header/mobile header/sticky navigation.

[Irene]

Thanks!! it worked.

This script is from GP? If it is, it can be delayed?

Inline
!function(){“use strict”;if(“querySelector”in document&&”addEventListener”in window){var e=document.body;e.addEventListener(“mousedown”,function(){e.classList.add(“using-mouse”)}),e.addEventListener(”

Thanks
Irene

[Tom]

Hi there,

Delayed until when? The script itself is output in the footer, so it’s already quite delayed (until all of your content has loaded).

Let us know 🙂

[Irene]

Hi Tom,

Thanks for your answer!

I am struggling with LCP and I know that the real culprit is Ezoic ads. However I have to do what I can with what I have.I know nothing about scripts and code, I accomplished simple CSS tasks based on Ying help.

I know that I don’t have to delay functionality in the head and menu.
I use the Ezoic LEAP and I see the following:

I was assuming that they were in order, and I only can choose between delay or not delay.

This is a WP Multisite with 3 subsites and I switched to GP in different dates.

All your help will be much appreciated.

Irene

[Irene]

I don’t expect perfect scores, I only want to be out of the red zone.

[Ying]

You can give it a try, set it to delay and see if your site is affected and if the score gets better.

[Irene]

Hi,

1)
I see an horizontal gap in the footer, its suppose the page to be uncached, and I see it in Chrome and Edge.

2)
a horizontal scrolling bar for only one page.

Thanks!

[Ying]

This question doesn’t seem to be related to the original topic.

Can you open a new topic?

Quick tip to your current question, some containers are using align full option which will create horizontal scroll.

Please avoid using that option.

The best way to create full width layout is to set the content container of the page to full width.

You can use the layout metabox to do so:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

[Author]

Posts