Topic: after_header_content hook for mobile nav?

Wellspring
March 25, 2024 at 9:15 am

I have a “menu topper” (another row of nav/links) element that is well-styled at the hook “after_header_content”… including some complex responsive action.

This was working well, until we had to use the streamlined mobile menu. (The content simply does not apply there). Is there a way we can add this hook to the mobile menu in our child theme?

Refactoring all the styling with one of the mobile menu hooks would be tricky, since our element must be after <nav> to respond to sticky classes being added there.

Thanks!
Ying
March 25, 2024 at 9:18 am

Hi there,

Can I see the element on front end of your site?
Wellspring
March 25, 2024 at 9:55 am

Sure thing; link in private info below!
Ying
March 25, 2024 at 12:11 pm

Hi there,

I would use before_header hook, and with custom CSS it should work on both desktop and mobile.
Wellspring
March 25, 2024 at 12:22 pm

As per my original post, our element must be after <nav> to respond to sticky classes being added there. (This is because CSS’s adjacent sibling combinator only works for preceding elements)

My question is if there a way we can add a hook to the mobile menu, by utilizing our child theme? Thanks!
Wellspring
March 25, 2024 at 12:41 pm

I have found another solution.

This would still be useful to know, but it’s not longer needed for this site, thanks!
Ying
March 25, 2024 at 12:53 pm

As per my original post, our element must be after <nav> to respond to sticky classes being added there.

No, it’s not necessarily to be after <nav>, CSS can be changed.

You just need to add some margin-top to the sticky nav to create some space for the container, and add sticky CSS to the container.
Wellspring
March 26, 2024 at 2:14 pm

Ying, I appreciate that you are trying to find creative alternative solutions outside of the parameters I have provided. Thank you for this effort. Unfortunately, you seem to have a misunderstanding. My issue is not the positioning of the topper. I’ve been working with CSS for over 20 years. That part is not a challenge.

To clarify, my requirement is to have styling within the .menu-topper respond to the <nav> getting the .sticky-class (Specifically, I have been hiding and reordering some elements in the sticky iteration of the topper)

To do this I have been using a ~ combinator, like nav.sticky-class ~ .menu-topper{flex-order: -1; etc}. This requires that the menu topper element follows <nav> in the HTML. (This ~ used to be called the “general sibling combinator,” but it has been officially renamed to the “subsequent sibling combinator” to clarify that it will not work if the targeted sibling precedes the qualifying sibling.)

Anyway, as interesting and informative as this all may be, it does not answer the question that I posted. Given your familiarity with the generate press theme, can you please give some guidance on modifying my child theme to add the hook I need?
Ying
March 26, 2024 at 5:13 pm

If themenu-topper is not right after the sticky-class, for example, it’s in the before_header hook, then you can use this CSS selector to target it, will this work for you to save the effort modifying the templates?
body:has(nav.sticky-class) > .menu-topper
Wellspring
March 28, 2024 at 8:45 pm

You are good! (and persistent, lol)

I considered this approach. Honestly don’t recall why it was eliminated. Client may have required 95% support, or something. Ultimately some requirement changed and we used a different solution.

This is really a low-urgency thing now, but I wanted to learn *how* to do that template mod, as we are doing more sites in GPP/GBP. If it’s a headache for you don’t sweat it. Certainly don’t want to distract from the next release. The alpha looks like GREAT progress.

Thanks!
Ying
March 29, 2024 at 10:33 am
can you please give some guidance on modifying my child theme to add the hook I need?

I don’t think it’s possible though, the mobile header is not from GP theme, but GP Premium plugin, there isn’t a template for you to modify, unfortunately.

You will need to re-write the entire function, or try this function which adds generate_after_header_contenthook into generate_inside_mobile_header hook when viewed on a mobile device, so the generate_after_header_contenthook can be used on all devices.
```
add_action('generate_inside_mobile_header', function() {
	if (wp_is_mobile()) {
	    do_action('generate_after_header_content');
    }return;
}, 999);
```
Wellspring
March 29, 2024 at 1:02 pm

Brilliant; thank you so much for the insight, and the solution!
Ying
March 29, 2024 at 1:27 pm

You are welcome 🙂

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

after_header_content hook for mobile nav?