[Resolved] changing the mobile menu and search bar look

[Leo]

Did you clear your caching plugin after the updates?

If the issue still exists, can you disable the caching plugin for us to take a look?

[Justin]

Yea I did and I also tried disabling it but didn’t solve the issue

[Fernando]

Hi Justin,

This is what it currently looks like on my end on mobile: https://share.getcloudapp.com/z8ulYney

May I know how you want it to look like?

[Justin]

https://postimg.cc/QHMZWM75
This is what it was before

[Fernando]

Can you try adding this CSS?:

@media (max-width: 768px) {
    form.wp-block-search__button-inside.wp-block-search__icon-button.alignright.wp-block-search .wp-block-search__inside-wrapper {
        border-radius: 40px;
    }

    form.wp-block-search__button-inside.wp-block-search__icon-button.alignright.wp-block-search .wp-block-search__inside-wrapper input#wp-block-search__input-1 {
        border-radius: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    form.wp-block-search__button-inside.wp-block-search__icon-button.alignright.wp-block-search {
        border: none;
        background-color: transparent;
    }

    button.wp-block-search__button.has-icon.wp-element-button {
        background-color: transparent;
        color: #888888;
        padding: 4px 0 4px 0;
    }
}

[Justin]

It didn’t change anything

[Fernando]

You have a syntax error somewhere in your custom CSS. Copy and paste all CSS code you have here http://csslint.net/ and correct the error first.

[Justin]

I tested that by removing all custom css and just adding your css but that did noting also

[Fernando]

I can see it working from my end. Can you try clearing your browser’s cache? If that doesn’t work, try a different device/browser.

[Justin]

That wasn’t the case for me but I instead just undid everything and after much research got it to look almost the way it was before except for one thing the height is much larger and when I try to change the height with CSS the search icon lowers what is a good fix for this?

[Fernando]

That’s odd. It must have been a caching issue.

Try adding this:

form.wp-block-search .wp-block-search__inside-wrapper :is(input#wp-block-search__input-1, button.wp-block-search__button) {
    padding-top: 5px;
    padding-bottom: 5px
}

Replace the values to adhere to your preference.

[Justin]

Thank you that worked

[Fernando]

You’re welcome, Justin!

[Author]

Posts