Archived topic
customizin width and height of search bar
5 replies · Started by Halil on January 10, 2023
hi,
could you pls help me with customizing the appearance of search bar on my site?
on mobile view and sticky navigation, size of the search bar is perfect. however It's a bit narrow (small height) and stick to my logo when it's active.
I dont want to increase my menu item heights to make search bar taller.
ıs it possible to make it taller and put some margin so that it doesnt stick to my logo?
Hi there,
for Desktop try adding this CSS:
@media(min-width: 1025px){
.navigation-search input[type="search"] {
height: 60px !important;
position: relative;
top: -10px;
right: -40px;
max-width: calc(100% - 40px);
}
}almost done David, it did what I want for desktop, but ruined the view of search bar when I click the search icon from the sticky navigation menu! pls look at the pics I've added.
Try this instead:
@media(min-width: 1025px){
.navigation-search input[type="search"] {
height: 60px !important;
position: relative;
top: -10px;
right: -40px;
max-width: calc(100% - 40px);
}
nav.navigation-stick .navigation-search input[type="search"] {
height: 56px !important;
top: 0;
}
nav.navigation-stick .navigation-search {
max-width: calc(100% - 140px);
left: unset !important;
right: 0 !important;
}
}perfect support team ! huge thanks David!
Awesome - glad to be of help