Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by EverythingPlants

  1. Hello all !! I followed this tutorial on how to place a search bar in the header. (https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71). When you visit the homepage, the text and search are both black. When you go to the Accessibility/Terms of Use/Privacy Policy pages, the text is white but the search bar is still black (because the background is dark and the text is dynamic). What code do I need to make the search bar dynamic with the background so it'll automatically change from black to white if it's dark. Here's the website link: https://www.everythingplants.online/ Below are the codes I'm using: HTML <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ let searchBlock = $('#block-yui_3_17_2_1_1694223776832_20726'); $(searchBlock).insertAfter($('.header-title-nav-wrapper')); }) </script> <script> $(function(){ let searchBlock = $('#BLOCK-ID-HERE').addClass('header-search-bar'); $(searchBlock).insertAfter($('.header-title-nav-wrapper')); }) </script> <script> $(function(){ let searchBlock = $('#BLOCK-ID-HERE').attr('id','').addClass('header-search-bar'); $(searchBlock).insertAfter($('.header-title-nav-wrapper')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); }) </script> CSS .header-search-bar{ margin: 0 0 0 2.5vw; } .header-search-bar{ margin: 0 0 0 2.5vw; @media(max-width:799px){ display:none; margin: 0 0 0 0vw; } } .mobile-header-search-bar{ display:block; padding-left:3vw; padding-right:3vw; .preScale{ opacity:1 !important; } }
  • 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.