[Resolved] Search Bar- Font, color – change

Home Forums Support Search Bar- Font, color – change

  • This topic has 7 replies, 4 voices, and was last updated 9 months ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1147016
    Matthias

    After changing all colors i seem to use to my liking i checked the search bar (i have it activated to show in nav bar)

    It seems to be a color i have choosen for links and similar.

    My questions are:
    1. how can i change the font + font size or search you type in. its really small
    2. how can i change the font color of the search you type in? It seems to be one of the color settings i see mto have missed as it is some orange i used. The same applies for the X to cancel the search.

    Additional question:
    Are there different options to show the search bar after clicking the magnifying glass?
    Currently its left aligned overlay of the menu. Are there any settings for that? (alignment position etc.)
    I would like something like a fullscreen popup – with the search in a good font size (+color) right in the middle. With the whole background overlayed with black opacity.

    #1147434
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site so i can see whats effecting the placeholder and ill provide all the CSS in one go.

    Additional Questions – unfortunately not…. its doable but would probably be simpler to develop something from scratch or use a popup/modal plugin.

    #1153120
    Matthias

    i sent a message with the data through the contact form as suggested.
    It also included data for my other question here.

    Hope that worked.

    #1153505
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS for the font size:

    .navigation-search input[type="search"] {
        font-size: 20px;
    }

    As for the colors, do the options in Customize > Colors > Primary Navigation not work?

    Let me know πŸ™‚

    #1153716
    Matthias

    the color worked. I did in fact oversee that color for the Navigation Search. The settings there were empty – so the fallback seem to be the color set as current Text or similar.

    the css worked also.

    thx.

    Just in case – as i wanted the search to be the same as the menu – andmy settings in Typography->primary Navigation was font-size 15px and font-weight 600 i did a quick search and a little trial-and-error (as i don’t know one thing about css).
    so if your looking for the same look – add font-weight and use the same settings as via the typography plugin.

    /*Menu - Navigation Search Font Size */
    .navigation-search input[type="search"] {
        font-size: 15px; font-weight: 600
    }
    #1154352
    Tom
    Lead Developer
    Lead Developer

    Glad it worked – thanks for sharing your CSS πŸ™‚

    #1256926
    Huseyin

    How could I get the text in the middle, where users types in the middle of the search bar?
    Thankssss

    #1257004
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can open a new topic?

    Thanks!

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