[Support request] TOP BAR DISAPPEAR WHEN SCROLLING DOWN, IN CASE OF MERGE HEADER

[Yohann]

Hello,
I have created a top bar with secondary navigation inside.
I have created also a main menu sticky, with merge. When I don’t merge eveything is ok. When I merge it, the top bar goes up and disappear with the pages content by scrolling down..
How can I fix it, to have always the top bar visible above the sticky main menu ?

This is the css I have used to fix the top bar with secondary navigation . It works when main menu is not merged.

.top-bar {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:999;
}

@media (max-width: 979px) {
.top-bar {
display: none;
}
}

#secondary-navigation {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:999;
}
.sticky-enabled .main-navigation.is_stuck {
top: 40px !important;
}

Thank you for you help

[Fernando]

Hi Yohann,

For reference, can you provide the link to the site in question?

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

[Yohann]

https://yderhy-dev-dr-yohann-derhy.pf26.wpserveur.net/

[Fernando]

Thank you!

The structure created by the Merge feature would prevent the “top bar” from sticking. One approach it to add the Navigation through a Block Element – Hook. Hook it to before_header, and set a priority of 1. This should allow your code to make it sticky work.

[Yohann]

How do you had the Navigation through a Block Element – Hook.?

[David]

Hi there,

there is the core Navigation Block, but it is not particularly good.
the other option is to Hook the Secondary navigation inside the Primary Nav, and then both can be sticky.

But is the LA CHATTE A TA MERE text between the two navs required?

[Yohann]

thank you,
but I don’t understand the process to Hook the Secondary navigation inside the Primary Nav.
Can you explain to me the procedure please ?
Thank you so much

[Ying]

Hi Yohann,

Can you answer the question first so we get to know if David’s option would work.

Then we will provide the instructions on how to achieve this 🙂

[Yohann]

No this text is going to be removed

[David]

Try this:

1. Add this PHP Snipper to your Site:

add_action('generate_inside_navigation', function(){
    generate_secondary_navigation_position();
    echo '<div class="inside-nav-wrapper">';
},5); 
add_action('generate_inside_navigation', function(){
    echo '</div">';
},100);

2. In Customizer > Layout > Primary Navigation set the Inner Navigation Width to Full Width.

3. In Custominzer > Layout > Secondary Navigation set the Location to No Navvigation.

4. Remove the current CSS you have for your Sticky Secondary navigation.

5. Add this CSS to your site:

:is(#site-navigation, #sticky-navigation) .inside-navigation #secondary-navigation,
:is(#site-navigation, #sticky-navigation) .inside-nav-wrapper {
    flex: 1 0 100%;
}
:is(#site-navigation, #sticky-navigation) .inside-nav-wrapper {
    display: flex;
    max-width: 1230px;
    margin: auto;
}

This will remove the Secondary Nav from its current position and place it inside your primary navigation container. So it will be included in the GP Sticky nav.

[Yohann]

thank you very much. It works perfect on desktop, but it has completely disappeared on mobile. And I need This secondary menu especially for mobile.
Can you help me to fix it with some pieces of code please ?
And last question : is it possible to reduce the height of the secondary menu when scrolling down ?
Thank you very much for your help

[Ying]

Try add this CSS, the height of the secondary navigation when scrolling down is set to 50px in below CSS, feel free to change the value.

#secondary-navigation ul#menu-menu-secondaire {
    display: flex !important;
}
.main-navigation.sticky-navigation-transition  #secondary-navigation ul > li > a {
    line-height: 50px;
}

[Yohann]

Thank you, it looks great when you scroll down
But when you are on the page without scrolling (just after it has been loaded), the line-height is very small.
When I go in customizer>secondary navigation>line height, and increase the height, it works on the demo, but not in real…
How can we fix it ?
Thank you

[Ying]

When I go in customizer>secondary navigation>line height, and increase the height, it works on the demo, but not in real…

If it works in the customizer, it should work on front end as well.

Make sure cache is cleared.

[Yohann]

hello,
Thank you for your answer.
I tried all to tell me, but I confirm it works well when :
– you are in the customiezr
– you scroll down

it doesn’t work when you arrive on the new page in browser.

I cleared the cache, I deleted browser history

Do you have an other idea?
Thank you

[Author]

Posts