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

[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.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Jonathan]

Should have said

[smartslider3 slider=2]

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

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Author]

Posts