Jump to content
Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://hughgordon-test.squarespace.com

Hi everyone!

I need to set a background color for the specific area of the Menu wich I've customised with the code below to appear in the left side of the screen on Desktop.

https://hughgordon-test.squarespace.com/
Password: 2024

I can´t find the way to simply set the color background like the other areas of the page. I get that white block and I don't know how to solve it... 

Could somebody help with some idea or solution? @Ziggy 

Thank you!!
 

/* Float header */
@media screen and (min-width:992px) {
body:not(.sqs-edit-mode) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 50%;
    left: 5vw;
    padding: 0 !important;
    transform: translateY(-50%);
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section.page-section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}}
}

Screenshot2024-09-30at15_36_33.thumb.png.214d9926dbc77820138e476a833d4683.png

Edited by jjohansson
Update
Link to comment
1 hour ago, jjohansson said:

I can´t find the way to simply set the color background like the other areas of the page. I get that white block and I don't know how to solve it... 

I'm not sure I understand the question, what do you want to achieve?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)

In the image you will see the white color in the left side of the screen... I just want to set it with the same grey than the image has.  Basically to know how I can set a custom background color for that left area. If you need access as admin I send you an invitation.

Edited by jjohansson
Link to comment
  • Solution

Add this to Custom CSS:

body {
    background-color: hsl(0, 0%, 96.08%);
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
43 minutes ago, jjohansson said:

I have a last question regarding moving vertically or horizontally that menu items, any idea or suggestion?

Where do you want to move it to?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Use this CSS:

.header-layout-nav-center .header-nav {
  text-align: left;
}

You'll need to add the instagram social link to your header before we can reposition it.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.