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
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.