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

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

Home Forums Support Sticky Header on Desktop Header image + Sticky Mobile Menu disappearing

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #376100
    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!

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

    #376495
    Tom
    Lead Developer
    Lead Developer

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

    Let me know ๐Ÿ™‚

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

    #376970
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #376993
    Tara

    Of course – done!

    #377162
    Tom
    Lead Developer
    Lead Developer

    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.

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

    #377495
    Tom
    Lead Developer
    Lead Developer

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

    #377554
    Tara

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

    #377687
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! ๐Ÿ™‚

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