Full width search bar color (+widget color)

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 :)

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 :P

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%;
}

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.

Try this:

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

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); 

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

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

Any clue why that could be?

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

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);
}

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

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.

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.

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

thanks a lot.