Jump to content

Header Colours 7.1

Recommended Posts

Site URL: https://www.exposethewild.com/

I am looking for a way to add a different coloured stripe to the bottom of my header and possibly the top of my footer.

Before switching to 7.1 I used this code

.Header.Header--bottom {background-color: #434515;}.Footer {background-color: #434515;}

Obviously that does not work with 7.1

I am hoping I can do the same in 7.1 but as of yet have not been able to figure it out. Any help would be greatly appreciated!

I've managed to cheat it on the main page by adding sections to the top and bottom and using a custom css to change the min height of the sections. However, I would need to add sections to every single page and every new blog post I make to keep these stripes the same across my whole site. I really hope someone knows how to make something like this part of the header and footer.

Link to comment
  • Replies 2
  • Views 505
  • Created
  • Last Reply

You mean header/footer background color or border color???

If border, use this code

header#header:after {
    content: "";
    background: red;
    height: 5px;
    width: 100%;
    display: block;
} 
footer.sections:before {
    content: "";
    background: red;
    height: 5px;
    width: 100%;
    display: block;
}

image.thumb.png.2919851ec5d644d1918250a29cf0bdb4.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/13/2021 at 6:51 PM, tuanphan said:

You mean header/footer background color or border color???

If border, use this code


header#header:after {
    content: "";
    background: red;
    height: 5px;
    width: 100%;
    display: block;
} 
footer.sections:before {
    content: "";
    background: red;
    height: 5px;
    width: 100%;
    display: block;
}

image.thumb.png.2919851ec5d644d1918250a29cf0bdb4.png

This is exactly what I wanted. Thank you so much! 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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