[Support request] Search Bar Customization

[David]

Hi Tom and Team,

Is it possible to change the search bar to something like this? With the white arrow at the top? And text below the placeholder?

(Also can you change the color of the font as it’s typed into the placeholder)?

Please see pic for reference.

Thank you!

[Tom]

Hi there,

This CSS will take you most of the way:

.navigation-search.nav-search-active {
    top: 60px;
    width: 300px;
    left: auto;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background: #efefef;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #000;
}

.navigation-search.nav-search-active:after {
    content: "Your test content";
    margin-top: 10px;
    display: block;
    font-size: 13px;
    text-align: center;
}

.search-item.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 7px);
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    z-index: 100;
}

The arrow is harder simply because the search area isn’t aware of where the search icon is. Is your account the last item in your navigation?

[David]

Hi Tom. Thanks for this!

Regarding the arrow, yes, search is the last item on the right.

[Tom]

Any chance you can link me to your site so I can see what it looks like so far?

[David]

For sure. I added the link in the original message. The password to access it is “Orange991”

[Tom]

That password doesn’t seem to be working. Can you double-check?

[David]

Hi Tom. Still had cache enabled. Could you kindly try again?

[Tom]

I actually thought of a way to add the arrow regardless of how the menu items are positioned. I’ve adjusted the CSS above 🙂

[David]

That worked beautifully! One final question about it. I am trying to move the box over to the left so that the right side of it is parallel with the magnifying glass square. Here is what I added to accomplish it:

.navigation-search.nav-search-active {
position: absolute;
top: 47px;
width: 350px;
left: auto;
background: #fff;
padding-top: 25px;
padding-bottom: 15px;
padding-right: 15px;
padding-left: 15px;
margin-right: 228px; ***What I added***
box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
}

The problem with this is that it is in the right position on my laptop/resolution but on another (larger, more pixels), it is pushed too far to the left.

Is there anyway to fix this? I toyed around with em and vw as well but got the same results.

[Tom]

I’m not sure if this is possible (without javascript), unfortunately, as the search form isn’t aware of where the search item is.

I’ll ping David to see if he has any ideas.

[David]

Try this CSS:

.navigation-search.nav-search-active {
    top: 47px;
    width: 350px;
    left: auto;
    background: #fff;
    padding-top: 25px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
    transform: translatex(100%);
    right: 50%;
}

[David]

Hey Tom and Dave,

Thanks so much for trying to help me. The problem is, as the screen size (width) increases, the search box is pushed over more and more. I only have a 14′ and 15′ … I imagine on even larger monitors it’ll be pushed too far over and look odd.

Does that make any sense?

[David]

It looks great to me – this is on a 27″ monitor ( 90% of screen width):

https://www.useloom.com/share/f5d2237f7b694208be8b2f80eb837b7b

Maybe your browser cache needs clearing

[David]

Confused here… this was working. Now it appears that it isn’t. Checked my style.css and all style seems to be intact. Any ideas?

[David]

You have some broken CSS in your child theme style sheet:

@media (max-width: 768px) {
.main-navigation {
    border-bottom: 1px solid #E9E9E9;
}

This is missing the closing } for the media query.

[Author]

Posts