[Resolved] Sticky top nav with full-width background color

[Mirko]

Hi,
we face one issue:
We use secondary nav positioned above primary nav (used as a top bar nav).
Primary nav is containered to have the same width as main content.

As secondary nav comprises CTAs, this top nav should be sticky (as well as the primary one).

The solutions I was able to find in this forum do not lead to the desired solution:
If I declare secondary nav as positioned sticky, the primary one goes above it when scrolling, so it is hidden after scrolling.
If I position secondary nav inside primary one with the help of your “generate_inside_navigation” hook, it is containered as the primary one. But as top nav should have a full-width background color to highlight it, I have to put it in a full-width container.

Any ideas / solution how to resolve that?

[Ying]

Hi Mirko,

We can try wrapping the secondary navigation and primary navigation with a <div>, then use CSS to make this <div> sticky.

1. Go to appearance > elements, and create a hook element, enter <div class="custom-nav"> in the content field, select entire site as location, select generate_before_header as hook, set 1as the priority.
https://www.screencast.com/t/fPS9EdsR6R

2. Create another hook element, enter </div>, select entire site as location, select generate_after_header as hook, set 10as the priority.
https://www.screencast.com/t/WVNalLjj4

3. Add this CSS:

.custom-nav {
    position: sticky;
    top: 0;
}

[Mirko]

Hi Ying,
that´s absolutely awesome and a smart idea I was not able to develop.
Works fine.
Many thanks!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts