[Support request] Mobile sticky nav and hamburger mobile alignment

Home Forums Support [Support request] Mobile sticky nav and hamburger mobile alignment

Home Forums Support Mobile sticky nav and hamburger mobile alignment

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1990721
    Angelica Medina

    Hello, I followed the steps in the forum regarding off canvas panel menu for the same menu across all devices.

    On the mobile version, it splits the alignment of my “sticky navigation logo” apart from the hamburger to opposite end while desktop and tablet remain in the center.

    How can I align the the sticky navigation logo and hamburger to the center for mobile?

    #1990736
    Elvin
    Staff
    Customer Support

    Hi Angelica,

    Can you link us to the page in question? And perhaps, provide a mockup image of how you want things to align? We’ll use the mockup image as reference for the CSS writeup. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1991730
    Angelica Medina

    angelicalflowers.com

    #1991770
    Ying
    Staff
    Customer Support

    Hi there,

    Your site is in coming soon mode, can you send us temporary access to see the site?

    Let me know 🙂

    #1991801
    Angelica Medina

    Yes, you can sign in as generatepress, pass: generatehelp2021^^

    #1991804
    Angelica Medina

    You’ll notice that on mobile version the hamburger is to the left and it does not display the navigation logo as it does in desktop and tablet mode.

    #1991828
    Ying
    Staff
    Customer Support

    The login access can only let me see the coming soon mode:
    https://www.screencast.com/t/ogRdAiY6ep

    Can you add admin access for now?

    #1991831
    Angelica Medina

    Yes, done.

    #1991860
    Ying
    Staff
    Customer Support

    Give this CSS a try:

    @media (max-width: 768px) {
    #sticky-navigation  .navigation-branding {
        margin-right: 10px;
    }
    .inside-navigation.grid-container {
        justify-content: center !important;
    }
    #sticky-navigation.main-navigation.has-sticky-branding.navigation-stick.nav-align-center .menu-bar-items {
        margin-left: 0;
    }
    }

    Let me know 🙂

    #1991900
    Angelica Medina

    Thank you for looking into this but it did not change anything.

    #1991903
    Ying
    Staff
    Customer Support

    Ah one line has been overridden, I’ve updated the code, can you give it another try:
    https://generatepress.com/forums/topic/mobile-sticky-nav-and-hamburger-mobile-alignment/#post-1991860

    #1991955
    Angelica Medina

    Nope, nothing changes.

    #1991957
    Ying
    Staff
    Customer Support

    The code seems working fine when I tested in developer tool:
    https://www.screencast.com/t/gEheM9LvAvOF

    I don’t see the code in your site, did you replace the code with the updated one?

    #1991968
    Angelica Medina

    Yes, the new one is in there. I added it to “customize” > “additional css”. Is that not where it goes? 😢

    #1991993
    Ying
    Staff
    Customer Support

    Yes, it is 🙂

    It seems working now.

    Let me know!

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