Archived topic
Search bar customization (border and font)
6 replies · Started by Dmitrii on July 7, 2022
Hi!
I'm having difficulty with a couple of CSS customizations:
1) Adding a border that goes around the entire navigation bar on desktop only (see image in private area) without impacting the mobile design.
2) Changing the active font color on desktop + mobile without impacting the rest of the design on (when I use the option in the Customizer it changes the border/background color as well, which is why I want to use CSS).
Hi Dmitrii,
Here’s a CSS you may try adding through Appearance > Customize > Additional CSS:
@media (min-width: 1025px) {
/* CSS in here for desktop only */
.navigation-search.nav-search-active {
left: unset;
max-width: 95%;
}
span.menu-bar-item.search-item.active.close-search {
border: solid 1px rgb(174, 174, 174);
border-left: none;
}
}
.inside-navigation input.search-field {
color: rgb(0,0,0);
}You may modify the values to your preference.
Hope this helps!
Works great, thanks!
The only part that doesn't seem to reflect is this section: .inside-navigation input.search-field {
color: rgb(0,0,0);
}
The font color remains the same when you start typing.
Try replacing that with this:
nav#site-navigation .inside-navigation input.search-field {
color: rgb(0,0,0);
}Kindly let us know how it goes.
That works, but it also changes the border/outline color on mobile.
But it's not that big of a deal, I'll change it later.
Thank you sir!
I see. You’re welcome Dmitrii!
Resolved.
