Move subnav below page header

My primary menu is sticky so if possible I'd like this also to be sticky and to come alongside under the primary menu once you scroll down that far.

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Ok I've edited the post above to add a URL to show you. I am using a plugin so the subnav menu only appears on that one page. It will be like page navigation with different menu items depending on the page, the plugin can do that, I just need to figure out how to move the subnav menu below the page header. Thank you!

Hi there,

is it the secondary nav you want to move ? ie, the one with baby, mini albums etc

If so Leo provides the code here for that:

https://generatepress.com/forums/topic/styling-on-my-hook/#post-1269611

Yes sorry that's what I was wanting to do.
It worked to add the new one, but didn't remove the old one. So now it's appearing twice, did I do something wrong?

Any idea why I'm still seeing two secondary nav bars here?

Really sorry that your previous reply slipped through our net.
Try changing the code to this:

add_action( 'wp','craig_move_navigation' );
function craig_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
    add_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 15 );
}

The change is subtle - its just the priority 5 becoming 7.

Ah thank you so much! Yes that works now. I thought of changing the priority but I didn't guess the right number :)

I'd be so grateful if you could help me with one more thing. I am trying to make this secondary nav stick to the top of the page under the primary sticky menu, once you scroll down that far.

Inspired by this post about setting a CSS class to apply only when the page is scrolled down so far, here is my JS which I have added as an Element hooked to the wp_footer

<script>
var wrap = $("#secondary-navigation");

wrap.on("scroll", function(e) {
    
  if (this.scrollTop > 491) {
    wrap.addClass("fix-secondary-nav");
  } else {
    wrap.removeClass("fix-secondary-nav");
  }
  
});
	</script>

And here is my CSS

.fix-secondary-nav {
	position:fixed;
	width:100%;
	top:40px;
}

I've verified that the JS is appearing on the page, however, it seems the class is not getting added. I know this is a bit outside the realm of GP support, but if you have a clue where I've gone wrong, please let me know :)

Would the CSS method work for you?

.secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

I couldn't get a good result with CSS only, but don't worry about it, I've decided to do something different with the design. Thanks again!

OK - ill take a look at your new topic :)