Site logo

Archived topic

Feature Request: Hook: generate_inside_sticky_navigation

3 replies · Started by Zach on July 29, 2017

Viewing posts 1–4 of 4

I wanted to add an element to my sticky navigation, but hide it from the normal navigation. I didn't see a hook for this so I used the "generate_inside_navigation" hook to insert it so it shows on normal + sticky nav. Then I used CSS to show/hide it as appropriate. I discovered that I could select the following IDs to differentiate between sticky and normal:

#sticky-navigation
#site-navigation

So, the following code works (my element is classed "logo-headline"):

#sticky-navigation .logo-headline { /* turn it on for sticky nav */
	display: block;    
}

#site-navigation .logo-headline { /* turn it off for normal nav */
	display: none;    
}

Note that for the mobile menu there are several hooks ("generate_inside_mobile_XXX") that cover similar cases but nothing that targets the sticky nav. It would be great if there was a "generate_inside_sticky_navigation" hook too.

Thanks for an awesome theme. The more I dig the more I love it!

The sticky nav and the regular nav are actually the same element, it just becomes sticky under certain conditions. The way you've done it above is perfect, however I would suggest using the .navigation-stick class instead of the ID.

Updated. Thanks for the tip.

For future searchers, here's the final code (my element is classed “logo-headline”):

.logo-headline { /* turn it off for normal nav */
	display: none;    
}

.navigation-stick .logo-headline { /* turn it on for sticky nav */
	display: block;
}

Perfect, thanks for sharing :)

This archived topic is closed to new replies.