Search boc for mobile in middle

Hi Giselle,

Try this CSS:

#mobile-header .navigation-search.nav-search-active ~ .menu-bar-items {
    position: absolute;
    right: 5px;
    top: 0;
}

Let me know :)

Hi Ying,

Thanks, that's working. But I can't get the purple overlay to stretch down over the green menu bar - there's a small green gap showing under the search.

I've tried adding padding and height to: .navigation-search.nav-search-active but it has no effect.

Thanks for your help,

Giselle

Hi there,

try adding this CSS:

.navigation-search input[type="search"] {
    min-height: 68px;
}

Hi David,

That works. Thanks for your help.

Just for reference, I had to add the CSS below to get rid of a green gap above and below the X block.

.main-navigation .menu-bar-items .search-item.active > a {
padding: 3px 0 5px 0;
}

Thanks,

Giselle

Glad to be of help!