[Resolved] Move subnav below page header

[Christine]

I have merged headers on my site and want a subnav menu to appear below the image.
How can I modify this code
https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568
so that it applies just to the subnavigation menu?
Thanks so much.

[Christine]

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.

[Leo]

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 🙂

[Christine]

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!

[David]

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

[Christine]

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?

[Christine]

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

[David]

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.

[Christine]

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 🙂

[David]

Would the CSS method work for you?

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

[Christine]

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!

[David]

OK – ill take a look at your new topic 🙂

[Author]

Posts