[Resolved] Header and primary navigation won't line up

Home Forums Support Header and primary navigation won't line up

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1022946
    Jonathan

    I don’t know what I’m doing differently this time, but I can’t seem to put a simple slideshow in my header and have my navigation bar beneath it stay put. Also I’ve done something to push the content WAY down the page, though all the settings seem normal. Thanks for any insight.

    #1022965
    Leo
    Staff
    Customer Support

    Hi there,

    Have you figured this out?

    I can see a slider behind the site title/logo.

    As for the page height, you have full screen page hero activated for that page:
    https://docs.generatepress.com/article/header-element-overview/

    Let me know 🙂

    #1023200
    Jonathan

    Thanks! I still need to figure out how to keep the navigation bar snug against the slider—it goes up into it or floats below it. I also want to keep the logo in the middle of the slider. I know I may need to do something different on mobile but trying to get desktop to work first.

    Not sure what I’m doing differently than I’ve done on other sites. I tried doing a fresh slider with default settings and still getting the same behavior. I have looked over the documentation but still pretty new at this.

    #1023585
    Leo
    Staff
    Customer Support

    Ahh I see what you are doing.

    Can you try David’s suggestion here to use a slider as background image?
    https://generatepress.com/forums/topic/insert-background-images-slider-effect-in-page-hero-element-without-plugin/#post-685231

    So the site title/logo would be the page hero content as well.

    Let me know 🙂

    #1023596
    Jonathan

    Well, that made the logo and navigation bar stay put. But now the content has jumped up into the header area. If I select “no merge” it places the content correctly but the slider goes below the navigation bar.

    #1023601
    Leo
    Staff
    Customer Support

    Can you set it to No Merge first and let me have another look?

    Make sure you also add this as the hero content:

    <div class="site-logo">
        <a href="http://HOME-PAGE-URL/" title="SITE-TITLE" rel="home">
    	<img class="header-image" alt="SITE-TITLE" src="http://LOGO-IMAGE-URL" title="SITE-TITLE">
        </a>
    </div>

    We are basically recreating the header using the header element.

    #1023640
    Jonathan

    Sorry, had to run out for a bit. Okay, I’ve set to no merge. Does the code you just gave me go above this code?

    [smartslider3 slider=2]

    I sure appreciate the help.

    #1023641
    Jonathan

    Should have said

    [smartslider3 slider=2]

    Not sure where all the code went in my last post.

    #1023658
    Jonathan

    Okay, obviously there is a certain way to paste code to have it show correctly. In any case, I’ve plugged in that code and am very close now. Everything is correct except the slider, which still resizes outside the header. Don’t know if that’s the slider or if I still don’t have the element set up right.

    For a while I had a double logo and eliminated that by changing the css, the z-index from -1 to 0. But I think the extra logo is still there, just behind the slider now. If I remove it from site identity, it fixes the problem but throws off the spacing.

    You can see I’m quite a novice, but I sure appreciate the help. I have to leave for a meeting in 20 minutes so any further suggestions I’ll get to later this evening.

    #1023661
    David
    Staff
    Customer Support

    Hi there,

    that post Leo provided went on for some time, and the first attempt failed miserably.
    Can you:

    1. Customizer > Site Identity – Remove the logo.
    2. Remove the CSS from that article provided.
    3. Edit the header element so you have the Logo HTML and the Slider.

    This should now stack the logo and the slider. Once thats done let me know and i cant take a look at the CSS.

    #1023666
    Jonathan

    Well, I’ve made a mess of it as you can see. I guess I’m messing up the code in the header element, and I don’t know how to paste what I have so you can see it, as that didn’t work last time. And unfortunately I have to go to a meeting and will be gone 3 hours or more. Thanks for trying, and for your patience. Will try anything else you suggest when I get back.

    #1023748
    David
    Staff
    Customer Support

    We’re almost there. Now add this CSS:

    .slider-hero {
        position: relative;
    }
    .slider-hero .site-logo {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
    }
    #1023770
    Jonathan

    That just about does it. I was really hoping to have the navigation bar below the slider, but I can live with this if necessary. I do have the navigation location set “below header” in both the customizer and edit element, but it’s not helping.

    #1023791
    David
    Staff
    Customer Support

    Can be a little confusing but this is the low down.
    At the top is the Site Header.
    Below Header is the Primary Navigation.
    And below that is the default position of the Header Element.
    Ignore that its all merged this is the order they are output.

    You can move the Primary navigation below the Header Element with this PHP snippet:

    add_action( 'after_setup_theme','lh_move_navigation' );
    function lh_move_navigation() {
            remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
            add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
    }

    Here’s how to add PHP:

    https://docs.generatepress.com/article/adding-php/

    #1023798
    Jonathan

    I’ve only added a PHP snippet once before, the same time I made a child theme using a plug-in. But that Code Snippets plugin looks very promising. I may try that tomorrow.

    You’ve been exceedingly helpful. Thank you!

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