Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Support request] Sticky Header Conflict With Mobile Header

Home Forums Support Sticky Header Conflict With Mobile Header

This topic contains 9 replies, has 2 voices, and was last updated by  Leo 5 days, 19 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #470236

    Hello,

    When using the following CSS, I’m unable to view the primary navigation menu pages while in mobile.

    .custom-fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    }
    .custom-fixed-header + * {
    padding-top: 120px;
    }

    When I remove the CSS I’m able to view the menus while in mobile, but then the header is no longer fixed/sticky.

    I also used the following hooks.

    Before Header area:

    After Header area:

    Thank you for the help!

    -Jeff

    #470292

    Leo
    Staff

    Hi Jeff,

    Any reason you need to use that CSS?

    Should be able to achieve the same layout using this method here:
    https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470804

    Hi Leo,

    Thank you for the quick response. I found the CSS in a similar support post and gave it try. It worked with the exception of the mobile navigation menus not being visible
    https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

    I followed the instructions on the page from the link you provided and the changes seem to work with one caveat. The navigation logo is now to close to the menu buttons and I’m having trouble figuring out how to widen the space between them. I would like to be able to keep the menu buttons approximately where they are and move the logo further to the left side of the container. Can I alter following CSS to do that? I tried imputing different numbers in the “left: 0:” field without success.

    .main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
    }

    I appreciate the support.

    -Jeff

    #470891

    Leo
    Staff

    Is the navigation location set to above or below header as the article suggested?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470975

    Leo,

    No, I currently have it set it to float right.

    I did try both above and below the header. However, I want my primary navigation menus within the header and aligned with the logo. Do I still need to select the primary navigation location to either be set to above or below the header?

    Thanks,

    -Jeff

    #471029

    Leo
    Staff

    Yes – Set it to below header and align left should do it.

    This site is using the same method.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #471448

    Leo,

    That works, but now the header image is no longer viewable. Any suggestions?

    Thanks,

    -Jeff

    #471492

    Leo
    Staff

    Try uploading a background image to the navigation.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #471508

    That works, but how do I adjust the image location?

    #471637

    Leo
    Staff

    I would recommend cropping the image using WordPress Edit Media so you have better control for it.
    https://codex.wordpress.org/Edit_Media

    Your navigation container is currently 1100 x 111px.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.