[Support request] sticky navigation after navigation

[baidy]

Good day to you Gp Support,

I’m having a bit of an issue with some tasks:

I wish to incorporate a block that I created to the sticky navigation, here is the link to what we have: https://ibb.co/88vvm02

as you can see, no problem. this block ( element type:hook, hook name:after navigation) comprises a simple container, and in it a grid.

Now as soon as the sticky navigation appears: https://ibb.co/17GWRTr

I would like the mentioned block to stick to it perfectly, exactly like in the normal navigation, that’s all.

Link to the website:https://cryptopico.com/

thanks a bunch

[Ying]

Hi there,

I’m not able to see the screenshots:
https://www.screencast.com/t/qEylPqOvJ

So I’m having a hard time to understand what you want to achieve.

Can you try uploading screenshots here? https://postimages.org/

Let me know!

[baidy]

Hello Ying

here is the screenshot: https://i.postimg.cc/43rwGvTQ/stick.png (I’ve highlighted the block)

I would like this slider to be incorporated into the sticky navigation as well:

https://i.postimg.cc/0N8PfS4Z/Capture-d-e-cran-2022-09-21-a-06-49-42.png

website: https://cryptopico.com/

[Ying]

I see, that’s clear.

Are you using a block element to add the slider? If so, try changing the hook name to after_primary_menu.

Let me know!

[baidy]

Thanks, Ying

That almost made the trick it’s good in desktop mode, but the issue is that the tablet and mobile navigation display some serious mistakes: the block went inside the navigation

https://i.postimg.cc/br7T7J6r/Capture-d-e-cran-2022-09-21-a-17-59-02.png

[baidy]

Also, a question that stirs my mind is that even though it looks good on the desktop and the slider/block covers the full width( i set the container to 1450px) wouldn’t there be some space in the extremity if someone with a bigger screen is on the page?

Isn’t there some CSS that makes the slider+block automatically cover the full width of the screen?

[Fernando]

Hi Baidy,

I tried accessing your site but I’m unable to do so. It’s not displaying. I checked as well on a website accessibility checker to confirm: https://share.getcloudapp.com/llud9qw5

Can you check?

[baidy]

Hi Fernando

I put the homepage live

Is it alright on your end

[Fernando]

It’s still not working properly on my end. I also tried using a VPN, and it’s still just loading. I’m getting this: https://share.getcloudapp.com/ApuDR4br

Are you able to load it as expected from your end with no issues? Can you try temporarily disabling non-GP plugins? It would be good to take a backup of your site before doing so.

[baidy]

Hi Fernando

I’m pretty sure it was setting the block to primary menu that made the website crashed , it did for me too.

I’ve backed up the website manually through my hosting service like you advised

Could you try again ?

Thanks

[Ying]

Can you try this CSS:

html, body {
    overflow-x: unset !important;
}
.gb-container.gb-container-92ee59c8 {
    position: sticky;
    top: 67px;
    z-index: 1000;
}

@media (max-width: 768px) {
.gb-container.gb-container-92ee59c8 {
    top: 62px;
}
}

And set the GB container block(which contains the slider)’s inner width to full width, and background color to white?

[baidy]

Thanks, Ying,

that did the trick on mobile and tablet views!

do you happen to know how to do the same thing on the desktop view?

by the way the fact that you set : html, body {overflow-x: unset !important;}

override this css that i have : html,body{overflow-x: hidden;}

Which makes the overflow showing, I don’t find that visually appealing .

Thanks for your help

[Fernando]

The CSS provided by Ying should work for desktop as well. There’s a syntax error in your Additional CSS. Try using http://csslint.net/ to check. Make the necessary corrections, and then test again.

As for the overflow-x setting, setting it to hidden as it’s an ancestral div that has no definite height will cause the sticky CSS to not work. What overflowing elements do you have? Can you try setting the overflow more specific to those elements.

[baidy]

It was indeed showing in the code Ying gave me , it’s that the block was hiding under the main navigation so I put it to 13Opx, this issue is resolved, thanks to both of you

`html, body {
overflow-x: unset !important;
}
.gb-container.gb-container-92ee59c8 {
position: sticky;
top: 130px;
z-index: 1000;
}

@media (max-width: 768px) {
.gb-container.gb-container-92ee59c8 {
top: 62px;
}
}`

Fernando, you ask me which element is overflowing ?

if you go to the homepage mobile/desktop view and swipe left or right, you can see white band appearing on the border , entire page is floating I would like it to be static

[Fernando]

Can you try adding this instead for the overflow?:

.entry-content {
    overflow-x:hidden;
}

[Author]

Posts