Jump to content

Insert a red bar over header

Recommended Posts

Site URL: https://clownfish-orca-n5ml.squarespace.com/

Hi,

i would like to insert a 30px height red bar over header with custom css.

i've tryed with this code but the result is not what i want.

#header {
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:red;
}

i would like to push all the content dow

i've tryed adding ::before but it doesn't work

#header::before {
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:red;
}

Can anyone help me please ?

Cheers

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

2 hours ago, Studio-XS said:

Site URL: https://clownfish-orca-n5ml.squarespace.com/

Hi,

i would like to insert a 30px height red bar over header with custom css.

i've tryed with this code but the result is not what i want.

#header {
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:red;
}

i would like to push all the content dow

i've tryed adding ::before but it doesn't work

#header::before {
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:red;
}

Can anyone help me please ?

Cheers

You can try adding Design > Custom Css

#header {
  background-color: unset;
}

#header .header-announcement-bar-wrapper {
  background: red;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thanks for your answer but the result is not what i want.

I would like to add a 30px red bar before the header section and push all the page content down, not only make a red header background.

The code i would like to find has to mantain the announcement bar functionality untouched so i can activate and deactivate from the straight setup ...and the red bar i add has to be hided when the viewport change at smaller size 

Link to comment
2 hours ago, Studio-XS said:

Thanks for your answer but the result is not what i want.

I would like to add a 30px red bar before the header section and push all the page content down, not only make a red header background.

The code i would like to find has to mantain the announcement bar functionality untouched so i can activate and deactivate from the straight setup ...and the red bar i add has to be hided when the viewport change at smaller size 

Can i check it again? Your site is not valid at this moment

image.png.b71b06f1c73efabd5b4f754845633423.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.