[Support request] Mobile sticky nav and hamburger mobile alignment

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

[Elvin]

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

[Angelica Medina]

angelicalflowers.com

[Ying]

Hi there,

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

Let me know 🙂

[Angelica Medina]

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

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

[Ying]

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?

[Angelica Medina]

Yes, done.

[Ying]

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 🙂

[Angelica Medina]

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

[Ying]

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

[Angelica Medina]

Nope, nothing changes.

[Ying]

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?

[Angelica Medina]

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

[Ying]

Yes, it is 🙂

It seems working now.

Let me know!

[Author]

Posts