Mobile view in Pro header

[Lorenmn]

I’ve made a new header for this website - pets2places.co.uk and included a mobile version. I’d ideally like it to view the same as the previous (standard) header. Screenshot below.

If you look on mobile now, it’s not the same and seems to be cut off to the top left.

I’ve also added a phone number above the logo. On desktop, this is fine but on mobile, it wraps, even though I adjusted the font size smaller.

Can you help?

Thanks,
Loren

[mldarshana]

Hi Loren,

Thanks for writing in! Could you please try adding the following CSS rule into your Pro -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px) {
  ul.x-dropdown {
    left: 0;
    width: 13em !important;
  }
}

If that does not help, please provide us with your WordPress credentials in a secure note to check your issue further.
Hope that helps.

[Lorenmn]

That’s just switched it to the top-right corner and missed off the top option (‘Home’).

[thai]

Hi Loren,

• Please add the my-bar class to your bar:

• After that add this custom CSS:

@media (max-width: 767px){
    .x-bar.my-bar .x-bar-container,
    .x-bar.my-bar .x-mod-container,
    .x-bar.my-bar ul.x-dropdown {
        width: 100% !important;
    }

    .x-bar.my-bar .x-mod-container {
        justify-content: center;
    }

    .x-bar.my-bar.x-bar-outer-spacers:before,
    .x-bar.my-bar.x-bar-outer-spacers:after {
        display: none;
    }
}

Hope it helps

[Lorenmn]

Ah! Fabulous!!! Perfect!! Thank you!

[christian]

You’re welcome.