[Support request] How Do I Create A Sticky Header?

Home Forums Support [Support request] How Do I Create A Sticky Header?

Home Forums Support How Do I Create A Sticky Header?

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #684023
    Adam

    Just bought the pro version and I can’t figure out how to make the header sticky/fixed with this theme.

    #684034
    Adam

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

    #684039
    Adam

    Also, the typography settings I input for the Site Identity are not holding on mobile, everything gets bigger and centered, how do I stop this?

    #684055
    David
    Staff
    Customer Support

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

    #684062
    Adam

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

    #684224
    David
    Staff
    Customer Support

    Hi 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

    #684434
    Adam

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

    #684461
    David
    Staff
    Customer Support

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

    #684476
    Adam

    Okay, 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.

    #684478
    Leo
    Staff
    Customer Support

    I believe this is what you are trying to achieve:
    https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    #684506
    Adam

    Yes, 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.

    #684512
    Leo
    Staff
    Customer Support

    You 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/bcJsFByd

    #1018163
    Larry

    Is 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?

    #1018177
    David
    Staff
    Customer Support

    Hi 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;
    }
    #1018197
    Larry

    Wow! I totally missed the “Sticky Navigation” option under Layout!

    Really sorry for having bothered you.

    Much appreciated!

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