Jump to content

Style Search Bar in Navigation 7.1

Recommended Posts

Site URL: https://www.gypset.com/

Hi, I recently added the search bar to my header using this code https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71

Is there any way to customize it so I can remove the search box and background, make the icon and text pink and smaller, I want to make it match my site a bit more. Im excited about getting the feature there but I want it look good. i would love it to look like the screenshot attached but it might be too much to ask! Im just happy to style it so it looks like it belongs.

Thanks in advance

password: gypset2020

Screen Shot 2020-08-17 at 11.32.54 AM.png

Link to comment
  • Replies 2
  • Views 2.1k
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

/* Header search */
header#header input {
    border: none !important;
    background-color: transparent !important;
    color: pink !important;
    opacity: 1 !important;

Search is image. You can share image url, then I will give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.