[Resolved] Move subnav below page header

Home Forums Support Move subnav below page header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1343989
    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.

    #1343993
    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.

    #1344065
    Leo
    Staff
    Customer Support

    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 🙂

    #1344204
    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!

    #1344412
    David
    Staff
    Customer Support

    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

    #1344755
    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?

    #1350748
    Christine

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

    #1350765
    David
    Staff
    Customer Support

    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.

    #1367188
    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 🙂

    #1367502
    David
    Staff
    Customer Support

    Would the CSS method work for you?

    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    #1367553
    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!

    #1367617
    David
    Staff
    Customer Support

    OK – ill take a look at your new topic 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.