- This topic has 25 replies, 3 voices, and was last updated 1 year, 4 months ago by David.
-
AuthorPosts
-
September 22, 2018 at 2:59 pm #684023Adam
Just bought the pro version and I can’t figure out how to make the header sticky/fixed with this theme.
September 22, 2018 at 3:22 pm #684034AdamThe option suddenly appeared in the customizer, I guess I didn’t have the proper plug-in options activated. However, the logo and site identity disappears on the sticky header.
September 22, 2018 at 3:39 pm #684039AdamAlso, the typography settings I input for the Site Identity are not holding on mobile, everything gets bigger and centered, how do I stop this?
September 22, 2018 at 4:49 pm #684055DavidStaffCustomer SupportHi there,
the Sticky Navigation (which is included in the Menu Plus Module) is only a Sticky Navigation. In the Customiser > Layout > Primary Navigation you can include a Navigation Logo which you can set to sticky only or static + sticky.
For the mobile, you can also set the Mobile Header in Layout > Header where again you can assign a different logo if you wish. This will stop the normal site header logo from being displayed.
September 22, 2018 at 5:02 pm #684062AdamI want a header with the logo, then the name + tagline to the left, then a space, and the nav to the right – on mobile, the nav turns into a hamburger menu. I can’t get the Site Identity to show on mobile or sticky, and the logo is HUGE and underneath everything in regular/desktop.
September 23, 2018 at 3:11 am #684224DavidStaffCustomer SupportHi there,
ok so the Nav and Mobile Header doesn’t natively have a space for the Site Identity, but we could do all of what you require with a little code.
However, the easiest solution for this is to use an SVG image for the Site Logo to which you can include the brand identity to, just make sure to convert the font to curves / outlines. Likewise for a Nav or Mobile Logo. Here’s how to add an SVG:
https://docs.generatepress.com/article/adding-svg-logo/
Let me know
September 23, 2018 at 9:22 am #684434AdamDoes it need to be an SVG for that code to work, seems to work with the existing PNG file, too. But now the logo is to the right of the Site Identity, and how do I add that to the mobile/sticky headers? The logo is also now skewed on the mobile/sticky header.
September 23, 2018 at 10:20 am #684461DavidStaffCustomer SupportThe SVG method is to combine the Logo and the site branding into one image. Proposing SVG as it is better for displaying text then PNG. The plugin and setting the size is required as WordPress doesn’t natively support SVG and they don’t have a predefined size like a PNG, so they won’t display without that.
September 23, 2018 at 10:47 am #684476AdamOkay, I did that, doesn’t look good, but I’ll make another logo later if I still want to deal with this theme. However, the logo is larger in the normal header than the sticky/mobile header and not centered with the navigation bar.
September 23, 2018 at 10:49 am #684478LeoStaffCustomer SupportI believe this is what you are trying to achieve:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-headerSeptember 23, 2018 at 11:43 am #684506AdamYes, thanks! This is very close, the only problem now is the logo gets tiny on mobile even though the bar appears to be the same size as desktop.
September 23, 2018 at 12:09 pm #684512LeoStaffCustomer SupportYou can use this CSS to remove the padding around the logo on mobile:
.mobile-header-navigation .mobile-header-logo img { padding: 2px; }
I think it will work better if you remove the top and bottom space from the actual logo image though:
https://www.screencast.com/t/bcJsFBydSeptember 24, 2019 at 4:54 pm #1018163LarryIs there no “Sticky” Yes/No for the Header??? Or for at least the “row” where the menu is located? Do I have to create a header in Elementor in order to get a sticky header?
September 24, 2019 at 5:10 pm #1018177DavidStaffCustomer SupportHi there,
For the Navigation only Yes:
https://docs.generatepress.com/article/sticky-navigation/
You can also set the Navigation as the Header:
https://docs.generatepress.com/article/navigation-as-a-header/
If you want the standard Site Header to be Sticky then this CSS will do the trick:
.site-header { position: sticky; position: -webkit-sticky; top: 0; }
September 24, 2019 at 6:38 pm #1018197LarryWow! I totally missed the “Sticky Navigation” option under Layout!
Really sorry for having bothered you.
Much appreciated!
-
AuthorPosts
- You must be logged in to reply to this topic.