changing the mobile menu and search bar look

Hi Justin,

It's not possible based on your current HTML structure.

Let's try to enable the mobile header at customizer > layout > header.

And enable the navigation search at customizer > layout > primary navigation.

Let me know when it's done.

Ok its enabled

1. Try adding this CSS:

@media (min-width: 769px) {
span.menu-bar-item.search-item {
    display: none;
}
}

2. Add hide-on-mobile class to the container which contains the logo, and the container which contains the search block.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

3. Add a logo at customizer > layout > header.

Let me know!

I done that but it not displaying at all the way it should

https://postimg.cc/v4MH5qRT

I want it to break down the way this website does when you resize to smaller devices

Please be patient, I will provide CSS but before that, those steps must be done.

Let me know when the changes are made, so I can write custom CSS based on that layout.

I decided to leave it the way it is because I found some custom css online to fix it but it just kept creating other problems and page speed issues.

Ok, if you are happy with the solution you found :)

After a recent GP update, my search bar got messed up what do you recommend
https://ibb.co/RYt2ycG

I'm not seeing the rectangular box inside the search bar, neither on desktop of mobile (iPhone).

What device and what browser are you using?

Oh never mind I cleared my cache and cookies and its back to normal now weird

Glad you've sorted out :)

The problem came back after a recent update
https://www.royaltyspeed.com/