[Support request] How to make primary and secondary navigation sticky together?

[pz]

Look at my site: https://autoinformator.pl/

I want to make primary and secondary navigation sticky together. Now only primary navigation is sticky. I wonder if there’s a way to do it without third party plugins or codes using only GeneratePress funcionality?

[Tom]

Hi there,

You could try something like this:

.navigation-stick + .secondary-navigation {
    position: sticky;
    left: 0;
    right: 0;
    top: 50px;
}

[pz]

Thank you, however it works only for non-logged-in users. After logging only primary menu is sticky. Why?

[Tom]

I would have to log in to know 100%. Are any other elements introduced once you log in?

[Rodolfo]

Hi Tom,

I was just looking for the same behaviour and found this thread.

It works here, like PZ said… If I’m logged, does not work.
At this moment, it is not a problem (for me)… but it would be better if we can make it works when I’m logged too.

Any idea?

Thank you.

Just to you know… I added some extra css to hide shadow effect:
.sticky-enabled .main-navigation.is_stuck
{
box-shadow: none;
}

[Tom]

Any chance you can send us temporary login info so we can take a look?: https://generatepress.com/contact

Be sure to mention this topic if so 🙂

[Rodolfo]

Tom, good morning!

I got the problem… “Admin Toolbar”… in this case, top: 50px is not enought to show secondary navigation.
In this case, we should increase about 32px to push secondary navitation …

For example:

If not logged:

.navigation-stick + .secondary-navigation {
position: sticky;
left: 0;
right: 0;
top: 50px;
}

If logged:

.navigation-stick + .secondary-navigation {
position: sticky;
left: 0;
right: 0;
top: 82px;
}

Is there a way to do that?

[David]

Hi there,

Wordpress adds the admin-bar class to the body when it is in view. So your logged in selector would look like this:

.admin-bar .navigation-stick + .secondary-navigation

[Rodolfo]

PERFECT! Great!

David, just to know…

The final css would be it? (I mean, should I repeat position, left, right and just adjust top value?)

.navigation-stick + .secondary-navigation {
    position: sticky;
    left: 0;
    right: 0;
    top:45px;
}
.admin-bar .navigation-stick + .secondary-navigation
{
    position: sticky;
    left: 0;
    right: 0;
    top:77px;	
}

[David]

You only need the properties that are changing. In this case its just the Top property.

[Rodolfo]

Done! … thank you!

[David]

You’re welcome. Glad we could be of help.

[Rodolfo]

Hey again! …

It is working, but I just created another problem here…

I use anchor links and smooth-scroll class. So, when I click a link, H2 heading is hiddens, in back of second navigation area…

Is there a way to fix it too?

URL: http://www.computar.com.br – For example, in main menu, just select “SOLUÇÕES” menu and you will see it…

Thank you.

[David]

The simplest way would be to use some CSS to add some padding to the H2 elements.
Currently there is 86px top margin so you could split this between margin and padding e.g.

h2 {
    margin-top: 45px;
    padding-top: 40px;
}

[Rodolfo]

Perfect! … Thank you!

[Author]

Posts