- This topic has 10 replies, 2 voices, and was last updated 6 years, 6 months ago by Tom.
-
AuthorPosts
-
August 30, 2017 at 8:33 am #376100Tara
Here’s what we’re trying to achieve:
On Desktop: a Fixed/Sticky Menu & header (area with the logo)
On Mobile: sticky menu onlyHere 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!
August 30, 2017 at 8:35 am #376102TaraSorry, forgot to mention. We already tried deactivating all the plugins except GP Premium and turning on WP Debug. Neither resolved the issue, fwiw.
August 30, 2017 at 9:04 pm #376495TomLead DeveloperLead DeveloperAny chance you can remove the sticky header method? I may need to give you a better way of doing it.
Let me know ๐
August 31, 2017 at 9:15 am #376818TaraSure, 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!
August 31, 2017 at 1:27 pm #376970TomLead DeveloperLead DeveloperAny chance you can remove the fixed header element from GP Hooks as well?
Thanks!
August 31, 2017 at 2:14 pm #376993TaraOf course – done!
August 31, 2017 at 11:11 pm #377162TomLead DeveloperLead DeveloperGive 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.
September 1, 2017 at 7:27 am #377365TaraThanks. 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!
September 1, 2017 at 11:04 am #377495TomLead DeveloperLead DeveloperI just adjusted the code above – can you give it another shot?
September 1, 2017 at 1:04 pm #377554TaraBeautiful, that did the trick. Thank you, thank you, thank you!
September 1, 2017 at 9:42 pm #377687TomLead DeveloperLead DeveloperYou’re welcome! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.