Jump to content

changing banner and header area to a new colour

Recommended Posts

Site URL: https://iamabbytaylor.com/

Hi there! I'm using York and, on every page of my site, I want the nav bar area and the full banner area below to be one solid colour. I want the rest of the side background to remain white, but the Banner area with and Nav bar to be a dark colour, such as 31191E. Something roughly like the attached. I know I can change the whole site background colour but that's not what I want as I want the actual body of the web page to remain with a white background.

 

If someone can help that's be amazing thanks so much!

 

Screenshot 2020-05-05 at 13.44.25.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Add to Home > Design > Custom CSS

header#header {
    background: #31191E;
}
.page-text-wrapper.clearfix {
    background: #31191e;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5vw;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphan great stuff! Only problem is my header stays white on the mobile version of the site. Is there a mobile specific line of code I can add that will make the mobile version of the site match? I need my logo and menu to sit on the dark background on mobile too. 

Thank you!!

Link to comment
1 minute ago, abbytaylor said:

@tuanphan great stuff! Only problem is my header stays white on the mobile version of the site. Is there a mobile specific line of code I can add that will make the mobile version of the site match? I need my logo and menu to sit on the dark background on mobile too. 

Thank you!!

.mobile-bar-wrapper {
    background: red;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.