Adding Search Bar To Header

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

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

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;
}

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?

Just now, bycrawford said:

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

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

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!

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

15 minutes ago, TQDT said:

There's the code

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

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!

@TQDT - you also need to target the correct block where it says #BLOCK-ID HERE

2 hours ago, bycrawford said:

@TQDT - you also need to target the correct block where it says #BLOCK-ID HERE

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

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!