🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Sticky navigation alignment of logo and menu on desktop

Home Forums Support Sticky navigation alignment of logo and menu on desktop

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1153268
    feisar

    I’ve got my Sticky Navigation menu working as I want on mobile devices (logo left, hamburger menu right) and ‘medium’ width devices (logo centered, full navigation centered below), which you can see at the linked site.

    However, on larger screen devices, above breakpoint 1024px, I can’t get the logo floated left, and the full navigation to be floated right with space between. They are both bunched together in the middle on one line.

    Navigation Alignment is set to ‘centered’ (for the medium-sized devices), but if I set it to ‘right’ it looks correct on desktop, but then not on medium-sized devices.

    Any ideas how I can get it working on both medium-sized and desktop devices?

    Thanks!

    GP v2.42
    GPP v1.9.1

    #1153302
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try setting the navigation alignment to right:
    https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

    Then use dropdown option to set when the navigation should be below the logo and centered:
    https://docs.generatepress.com/article/navigation-drop-point/

    Let me know if this helps 🙂

    #1153310
    feisar

    Thanks for the reply.

    Yes, I’ve tried that with no luck. It looks good on desktop, but on medium-sized devices, both the logo and the navigation menu are aligned to the left, not centered! I’m not sure why.

    I’ve changed the settings on the live site so you can see what’s happening.

    EDIT: I’ve just noticed that no matter what I set the Navigation Drop Point to, it doesn’t change when it switches.

    Thanks.

    GP v2.42
    GPP v1.9.1

    #1153432
    Leo
    Staff
    Customer Support

    Ahh my bad that option is only for header.

    What if we use the current set up with this CSS?

    @media (min-width: 769px) and (max-width: 1024px) {
        .main-navigation .inside-navigation {
            display: flex;
            flex-direction: column;
        }
        .inside-navigation .navigation-branding {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }

    You can adjust the breakpoint as you see fit.

    #1153631
    feisar

    Thank you! That’s perfect.

    I had tried adjusting the CSS myself but just couldn’t get it to work.

    (Incidentally, should the Navigation Drop Point affect the Sticky navigation, or is there a reason it doesn’t?)

    GP v2.42
    GPP v1.9.1

    #1153642
    Leo
    Staff
    Customer Support

    The navigation drop point only works when header is used and the navigation as a header option is not used.

    Glad I could help 🙂

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