[Resolved] Search Block Element not in collapsed hamburger menu but outside

[Björn]

Hi.

I’ve created a block element for a search functionality and hooked it to “after_primary_menu”. On desktop it shows as intented after the menu items in the nav bar.

On mobile it shows outside the collapsed hamburger menu but I’d like to have it inside it. When the user expands the mobile hamburger menu the search should appear.

Have tried all available hooks – not the desired result.

[Ying]

Hi Bjorn,

Try this CSS:

.main-navigation.toggled form.wp-block-search.hide-on-mobile {
    display: block !important;
     width: 100%; 
}

[Björn]

No change at all.

I still have it on “after_primary_menu” – shall I keep this?

[Ying]

You have thehide-on-mobileclass on the search block before, did you remove it?

If so, the CSS won’t work. Can you add it back?

[Björn]

Wow, that’s exactly how I wanted it.

A big THANK YOU to you!

[Ying]

You are welcome 🙂

[Author]

Posts