[Resolved] Sticky menu navigation moves to the middle when scrolling (on mobile)

[karenh]

Hello,

I have the sticky navigation menu enabled. When scrolling on mobile (tablet & phone) view the hamburger menu pushes over to the left. I’d like it to stay to the right as it does on desktop. Can someone take a look and let me know how I can make this happen? My URL is: https://themaycstaging.wpengine.com

Thanks!

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
  nav#sticky-navigation div#primary-menu {
    margin-left: unset;
  }
  .menu-toggle {
    margin-left: auto;
  }
}

[karenh]

Awesome! It works great. Thank you David!

[David]

You’re welcome

[karenh]

Sorry to circle back to this again. But with the latest update this has stopped working. Can someone check to see why the scrolling on the mobile results in the toggle menu moving to the middle? The URL is https://themaycstaging.wpengine.com/ thanks!

[Ying]

Hi Karenh,

I checked on my phone, the menu toggle stays on the right:
https://www.screencast.com/t/Ds7hkL9ij3

Have you tried incognito mode on your mobile browser?

Let me know 🙂

[karenh]

Hi Ying,

It happens when scrolling, I cleared my phone browser and I’m still experiencing it. Here is a video share of it.

Thanks

[Ying]

I see, it’s more visible on a wider screen, try this CSS:

button.menu-toggle {
    text-align: right;
}

Let me know 🙂

[karenh]

Awesome that worked! Thanks

[Ying]

You are welcome 🙂

[Author]

Posts