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

Home Forums Support Full width search bar color (+widget color)

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1299022
    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?

    #1299479
    Leo
    Staff
    Customer Support

    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 🙂

    #1301094
    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 😛

    #1301297
    Leo
    Staff
    Customer Support

    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%;
    }
    #1301553
    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.

    #1302339
    Leo
    Staff
    Customer Support

    Try this:

    .navigation-search input[type=search] {
        backdrop-filter: blur(5px);
    }
    #1302403
    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); 
    #1302443
    Leo
    Staff
    Customer Support
    #1302484
    Matthias

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

    Any clue why that could be?

    #1302496
    Leo
    Staff
    Customer Support

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

    #1302629
    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);
    }
    #1302661
    Leo
    Staff
    Customer Support

    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

    #1303022
    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.

    #1303242
    David
    Staff
    Customer Support

    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.

    #1303325
    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.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.