[Resolved] customizin width and height of search bar

[Halil]

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?

[David]

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);
    }    
}

[Halil]

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.

https://ibb.co/F57qpKn
https://ibb.co/JHwZqNn

[David]

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;
    }
}

[Halil]

perfect support team ! huge thanks David!

[David]

Awesome – glad to be of help

[Author]

Posts