[Resolved] changing the mobile menu and search bar look

[Justin]

I have one more thing I want to fix that I noticed and couldn’t figure out.
is there a way to adjust the mobile device menu and search bar placement and how they change when you click them

This is what I want to change it to like in this example https://postimg.cc/Cz17zWbw from this https://postimg.cc/LqnFDCdS
this is how it changes when you click on it https://postimg.cc/ZvLQ4pkj/7d4f266a

[Ying]

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.

[Justin]

Ok its enabled

[Ying]

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!

[Justin]

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

[Justin]

https://postimg.cc/v4MH5qRT

[Justin]

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

[Ying]

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.

[Justin]

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.

[Ying]

Ok, if you are happy with the solution you found 🙂

[Justin]

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

[Ying]

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?

[Justin]

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

[Ying]

Glad you’ve sorted out 🙂

[Justin]

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

[Author]

Posts