Docs

[steve n]

Hi, so on my client’s site http://pocketsightwords.com/ the mobile nav works, but the styling is broken.

when unpressed, its fine. then you press it, and it change style while showing the menu, which is also fine.

the problem is when you press it again to hide the menu. the style of the nav button just stuck on ‘pressed’ style. How do we fix this?

I also see this happening with other website with x theme such as https://noblemarketer.com/blog

[Thai]

Hi There,

Could you please provide us with some screenshots?

Thanks.

[steve n]

3 screenshots attached.

1 before clicked
2 after clicked to show menu
3 after clicked to hide menu

[Christopher]

Hi there,

The navbar button is working fine on my end, please clear cache and test again to confirm me or let us know how we can replicate the issue.

Thanks.

[steve n]

you should be able to replicate it very reliably on mobile device.

should also happen when using the Chrome dev tools and emulate mobile device (iphone 6).

it works fine on responsive mode though. only breaks when run on mobile device mode.

[Rupok]

Hi there,

I got you and thanks for pointing that. Let’s add this under Custom > CSS in the Customizer.

.x-btn-navbar.collapsed:hover {
  background-color: #fff;
  box-shadow: none;
}

Hope this will solve the issue.

Cheers!

[steve n]

hey i just wanted to follow up. your css doesn’t solve the issue as the box is gone.

this one will fix it:

.x-btn-navbar.collapsed:hover {
  background-color: #fff;
  box-shadow: inset 0 0 0 transparent,0 1px 5px rgba(0,0,0,0.25);
}

cheers

[Nico]

Thank you so much for sharing.

Feel free to let us know if you need anything else.

Thanks.

[Author]

Posts