[Resolved] Sticky Header on Desktop Header image + Sticky Mobile Menu disappearing

[Tara]

Here’s what we’re trying to achieve:

On Desktop: a Fixed/Sticky Menu & header (area with the logo)
On Mobile: sticky menu only

Here are the items we need help with:

1) We applied the CSS, for desktop only, detailed in https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579. The sticky menu/header work fine, but the Page Header background image gets stretched vertically to include the sticky header padded area, too.

Here’s what the Page Header image should look like:

https://metcreativegroup.com/what-we-do/

But here’s what it looks like when the above CSS is applied (and the sticky header/menu works):

https://metcreativegroup.com/test/

The image is clearly being stretched to include the area behind the fixed header. Any thoughts on CSS or other edits we can make to get the Page Header background image to work correctly again?

2) On mobile, we only want the menu to be sticky, NOT the header area. It works fine until we scroll down past the Page Header, then the menu disappears for the rest of the page.

https://metcreativegroup.com/what-we-do/

This issue actually occurs on the desktop version, too, by default, but is moot obviously once we applied the CSS to create the sticky header above!

Thanks for any help you can provide!

[Tara]

Sorry, forgot to mention. We already tried deactivating all the plugins except GP Premium and turning on WP Debug. Neither resolved the issue, fwiw.

[Tom]

Any chance you can remove the sticky header method? I may need to give you a better way of doing it.

Let me know 🙂

[Tara]

Sure, thanks. We commented out the custom-header CSS.

In WP > Customize, should we also disable sticky headers on Desktop and/or Mobile?

Also – one other question – if you have any insight. We’ve set up the MetaSlider plugin to use FlexSlider (Shortcode is included in the Page Header content tab). It’s mostly working well, but there’s a weird Flash of another image when the slider first loads. Also, the initial slide text often “flashes” briefly at a much larger size and left-aligned, before centering. Wasn’t sure if that could be a script load delay issue or some incompatibility with GP or the MetaSlider plugin itself. You can view it here:

https://metcreativegroup.com/test-home/

Just say the word if you need access to the site, too.

Much appreciated!

[Tom]

Any chance you can remove the fixed header element from GP Hooks as well?

Thanks!

[Tara]

Of course – done!

[Tom]

Give this a shot:

@media (min-width: 769px) {
    .site-header {
        position: fixed;
        left: 0;
        right: 0;
        top: 50px;
        z-index: 1;
    }
    .admin-bar .site-header {
        top: 82px;
    }
    .page-header-content {
        margin-top: 138px !important;
    }
}

50px is the height of your primary nav, and 138px is the height of your header.

Let me know if that improves things or not.

[Tara]

Thanks. Added it and the sticky header works like we want now on both desktop & mobile, but there are two related issues now:

1) The main body content below the page header (Both main content column & sidebar) runs into the page header, as seen at:

https://metcreativegroup.com/test/

2) When logged into WordPress, the WP admin bar pushes the .site-header area (ie, menu) down properly, but the header is cut off at the top, per this screenshot:

https://metcreativegroup.com/wp-content/uploads/2017/09/Screenshot-WP-logged-in-user_090117.png

We suspect this is caused by the position:absolute and position:relative custom CSS, but not sure how best to address it. Any other suggestions? Should we wrap the whole site-header & header sections in another div to resolve it?

Thanks again!

[Tom]

I just adjusted the code above – can you give it another shot?

[Tara]

Beautiful, that did the trick. Thank you, thank you, thank you!

[Tom]

You’re welcome! 🙂

[Author]

Posts