Archived topic
Navigation serach
3 replies · Started by Eric on April 27, 2022
Hi there,
I've re-designed my main nav menu adding a CTA button following GP documentation, but since I made the button line-height or padding a bit more to make the button larger/taller, the bottom of the button spills out underneath the search line when the search is actively being used.
Please see my site and click on the search icon in the main nav to see what I'm referring to.
I've tried searching the forum for answers and tried messing with the CSS to resolve it, but I can't seem to figure it out.
Can you please point me in the right direction?
Thanks!
Hi Eric,
The total height of your Button is 50px, padding included. We can try increasing the height of the search form to 50px or more so the button would be hidden when searching. Try adding this to Appearance > Customize > Additional CSS:
@media (min-width: 769px) {
.navigation-search input[type="search"] {
height:50px;
}
}This code would increase the height of the search form to 50px on tablet and desktop as mentioned.
Hope this helps! :)
Thanks, Fernando! That's what I was trying to do but was not using the correct selectors.
All set.
Cheers
You’re welcome Eric! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. Cheers! :)
