[Resolved] Full width search bar color (+widget color)

[Matthias]

hi,

by default the color of the search in the navigation bar is contained.

Is there a way to have the color full width? While the text you enter stays contained?

Same for a search widget you add to the off-canvas panel on mobile:
Is there a way to have the color stretch to full width – while the text remains contained?

[Leo]

Hi there,

Not sure if I fully understand.

Are you referring to the navigation search option?
https://docs.generatepress.com/article/navigation-search/

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Matthias]

yes this one. As the link you send says “covers your menu items” – thats what i mean. Not to cover only the menu items, meaning the container width – but the full width of the page. While the text still can only be typed inside the container width

I have a menu with opacity – so when you scroll down you can see that the search is contained: margins left and right.
Same goes for the search widget i added to the off-canvas-panel.

I dont know css – but am trying a little with the inspector if my browser. Maybe i mean

div.inside-navigation.grid-container.grid-parent

and for the widget
form.search-form

But again – i dont know css – but would be nice if i found the right class 😛

[Leo]

It’s not possible to make the search bar covers the full width of the screen unfortunately.

What if we actually make it narrower like this?

.navigation-search input {
    width: 70%;
}

[Matthias]

maybe another idea that could work:

currently i have the navigation search color with opacity.
Is there a way to blur the background of the search bar? Like an ice effect.

Something like this: https://blog.prototypr.io/how-to-make-a-background-blur-in-css-with-one-line-of-code-e446c7236e60

So i can put opacity to very low (starting about 0.3 you can’t really see the difference when scrolling down – but instead combine your code for the width with a blur effect – so you write your search over blurred menu items.

[Leo]

Try this:

.navigation-search input[type=search] {
    backdrop-filter: blur(5px);
}

[Matthias]

this had no effect.

As i alread have code for the navigation-search font (1), width (2) i wasn’t sure if i should leave them as single blocks (1,2 + blur) or merge the three. Both had no effect (for the blur).

.navigation-search input[type="search"] {
    font-size: 34px; 
    font-weight: 600;
    width: 75%;
    backdrop-filter: blur(5px); 

[Leo]

It’s working for me?
https://www.screencast.com/t/zEWjIv3nPv0

[Matthias]

interesting.
It works on chrome – but not on firefox (my standard browser).

Any clue why that could be?

[Leo]

Might need to add prefix for browser support:
https://autoprefixer.github.io/

[Matthias]

I copied my code in there and the resulting into the css – but it didnt help.

.navigation-search input[type="search"] {
    font-size: 20px; 
    font-weight: 500;
    width: 75%;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}

[Leo]

Looks like FF doesn’t support it by default.

Take a look at the note at Browser compatiblity:
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

[Matthias]

ok – that explains a lot.

Is there a possibility to use the blur on all browsers – but have a fallback option if the browser is firefox, internet explorer or opera? It seems to those are the major ones that are not yet supported?

I mean – blur for all -> and if one of those three is used -> fallback to my former solution: white background with higher opacity.

[David]

Try this method to blur the menu items on focus:

.main-navigation:focus-within .main-nav li:not(.search-item) {
    filter: blur(3px);
}

It has better browser support. Just not IE.

[Matthias]

works.
Not working on IE is fine – about 4% where i live. But as Firefox has 25% it was a must 😉

thanks a lot.

[Author]

Posts