[Resolved] Navigation Search Bar Customisation

Home Forums Support Navigation Search Bar Customisation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #76244
    Lim Siong Boon

    Hi Tom,

    I am having difficulty trying to customise the search field to bring it next to the search icon on the navigation bar.

    My navigation search button is at the end of the navigation bar on the far right.
    The original behavior when the search button is click is that the whole navigation will turned into a search field.

    I have customised the navigation bar height.
    Now when I clicked on the search button, a search field will appeared but it is at the far left of the navigation bar.

    This is my website, http://www.pic-control.com/

    Appreciate if you can advise me if it is possible to make the search bar the same height as me new navigation menu height.

    Thank you.

    #76360
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    When using Generate Spacing, all of these values are updated automatically.

    Without Generate Spacing, you’ll need to match the height of the navigation search with the navigation.

    So this should do it:

    .navigation-search {
          height: 30px;
    }
    #83577
    Siong Boon Lim

    Hi Tom, I have “Generate Spacing”. How to do it with generate spacing?

    #83589
    Tom
    Lead Developer
    Lead Developer

    It will happen automatically – the search navigation takes on your menu height setting, so you shouldn’t have to do anything at all.

    #83685
    Siong Boon Lim

    I got it. Erase my CSS configuration and set the height using the “Generate Spacing”.

    May I know how do I shift the search bar to the right, next to the cancel cross button.
    Currently it is at the far left hand left.
    I would like my menu to be remain seen instead of being blocked by the search bar.

    Also how do I change the search bar color from dark gray to another color?

    Thank you.

    #83816
    Tom
    Lead Developer
    Lead Developer

    You can change the width of the search with this CSS:

    .navigation-search {
          max-width: 300px;
    }

    Change the 300px to whatever you like.

    To change the color, you can use this:

    .navigation-search input[type="search"], 
    .navigation-search input[type="search"]:active {
          background-color: #3f3f3f;
          color: #FFF;
    }
    
    .navigation-search input[type="search"], .navigation-search input[type="search"]:active {
          background-color: #3f3f3f;
          color: #ffffff;
    }
    #83881
    Siong Boon Lim

    Hi Tom,

    Thanks. I managed to get the width correct. The bar shorten to the right which does exactly what I wanted.

    The color customisation couldn’t work.
    I managed to figure out the following from your example which works for me,

    .navigation-search input[type=”search”], .navigation-search input[type=”search”]:focus {
    background: #AFA;
    color: #FFF;
    }

    Thank you for your help.

    #84025
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.