Okay
  Public Ticket #1118078
Search box height
Closed

Comments

  • [deleted] started the conversation
    March 30, 2017 at 5:41am

    Hello. I'm wondering how I can change the height of the search box? I currently have t set to the header box, rather than the fullscreen search. I need it to be 50px in height and change the text size to be much smaller. Thinking maybe 18px. 


    Thanks so much for the help!

  •  3,030
    Andrew replied
    March 30, 2017 at 9:28pm

     Hi Tristan,

    I hope you are having an awesome day and thanks for contacting us regarding your query.

    This can be done with the help of some Custom CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

    Looking forward to your reply :)

    Cheers! 

  • [deleted] replied
    March 31, 2017 at 2:16am

    Thank you for replying so quickly!


    Heres the website to which I am referring:


    http://develop.fiveatoms.com

  •  3,030
    Andrew replied
    March 31, 2017 at 12:46pm

    Hi again Tristan,

    Thank you for providing the link.

    You can change the search bar height and font size using the CSS code below:

    /*Change search bar height*/
div#search-outer {
    height: 50px !important;
}
/*Change font size*/
div#search-box div form input{
    font-size: 14px !important;
}

    Hope this solves the problem.

    Cheers!

  • [deleted] replied
    March 31, 2017 at 8:56pm

    hello again! That solved he problem with the box. However the "x" to close The search is still in the same position



    I tried using:


    Div#close {

    Padding-top: 7px;

    }


    But nothing has changed

  • [deleted] replied
    March 31, 2017 at 10:27pm

    Hello again! I was actually able to fix this issue using:

    .icon-salient-x {
        top: -25px!Important;
    }

    Thanks so much for the help Andrew!!!


    Also I know this isn't exactly the best thing to ask... But how could I animate the menu icons to bubble in after closing the search box? I don't need the animation code I just want to know how I can dress that in the css. Such as: 


    div.close:after   ?