Jump to content

Adding Search Bar To Header

Recommended Posts

I have a website where I am trying to add the search bar to the header. I have found a code online for it but whenever I try to paste it into the Custom CSS, it says there is a syntax error on line 7. I have some lines of code in there for centering all the sub categories, and having a scrolling announcement bar. Is there any way to fix this syntax error? Or is there any other way to add the search bar without using CSS? Thanks

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

5 minutes ago, bycrawford said:

Paste the code in here or send a screenshot and we can identify what the issue is for you.

It says that the error is on line 7

 

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
/* Removing the underline on link in the announcement bar */
.sqs-announcement-bar-text a{
  text-decoration: unset !important;
}

/* Adding left and right padding, change to match your site padding if needed */
.sqs-announcement-bar-text{
  padding-left: 30px;
  padding-right: 30px;
}

/* Hiding anything that extends beyond the screen */
#announcement-bar-text-inner-id {
  margin: 0 auto;
  overflow: hidden;
}

/* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds*/
#announcement-bar-text-inner-id p {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 300s linear infinite;
}

/* Stopping the marquee on hover so people can click on links */
#announcement-bar-text-inner-id p:hover {
  animation-play-state: paused
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Remove X icon */
span.sqs-announcement-bar-close {
    visibility: hidden !important;
    display: none !important;
}

Link to comment
2 minutes ago, TQDT said:

It says that the error is on line 7

 

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
/* Removing the underline on link in the announcement bar */
.sqs-announcement-bar-text a{
  text-decoration: unset !important;
}

/* Adding left and right padding, change to match your site padding if needed */
.sqs-announcement-bar-text{
  padding-left: 30px;
  padding-right: 30px;
}

/* Hiding anything that extends beyond the screen */
#announcement-bar-text-inner-id {
  margin: 0 auto;
  overflow: hidden;
}

/* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds*/
#announcement-bar-text-inner-id p {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 300s linear infinite;
}

/* Stopping the marquee on hover so people can click on links */
#announcement-bar-text-inner-id p:hover {
  animation-play-state: paused
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Remove X icon */
span.sqs-announcement-bar-close {
    visibility: hidden !important;
    display: none !important;
}

It says it's fine for me. Can you send a screenshot?

Screenshot 2023-01-01 at 15.13.22.png

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
Just now, bycrawford said:

It says it's fine for me. Can you send a screenshot?

Screenshot 2023-01-01 at 15.13.22.png

Oh sorry, what I meant is whenever I try to add in any other kinda code it says error on line 7

Link to comment
4 minutes ago, TQDT said:

Oh sorry, what I meant is whenever I try to add in any other kinda code it says error on line 7

Can you show that when you add the code in then please? It's impossible to know what's causing the issue if we can't take a look. Thank you!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
2 minutes ago, bycrawford said:

Can you show that when you add the code in then please? It's impossible to know what's causing the issue if we can't take a look. Thank you!

There's the code

Screenshot (294).png

Link to comment
5 hours ago, TQDT said:

The error is actually line 72... well, any line I try to start a new code on it says error

You need to remove everything from line 72 to 77 (and anything that says <style>) because this is meant to be added to Settings > Advanced > Code Injection > Header/Footer.

This should sort your issue!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
9 hours ago, TQDT said:

Do you know how to find the correct block ID? Thanks a lot, really appreciate the help

You can use chrome developer tools (if you use Google Chrome as your browser), or use this free Chrome extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

This is what basically every pro developer uses - it's the best there is and will make your life so much easier!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
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.