Site logo

[Resolved] customizin width and height of search bar

Home Forums Support [Resolved] customizin width and height of search bar

Home Forums Support customizin width and height of search bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2489967
    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?

    #2490086
    David
    Staff
    Customer Support

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

    #2490438
    David
    Staff
    Customer Support

    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;
        }
    }
    #2490465
    Halil

    perfect support team ! huge thanks David!

    #2491176
    David
    Staff
    Customer Support

    Awesome – glad to be of help

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.