Jump to content

How do I make the header transparent on one page and not on another?

Recommended Posts

On 4/6/2021 at 12:15 AM, hbakhsh said:

Site URL: https://collie-oriole-x7fl.squarespace.com/

I want the header to be transparent on the home page because there's an image in the first block that fits well with the design. However, the header styles are applied universally across the whole website making the site look more bland.

 

Thank you, help is very much appreciated!

Home page has it unique class name .homepage that can help differentiate with other page, you can try to turn colored nav bar and use this css to achieve the effect on homepage

body.homepage .header#header {
    background-color: transparent !important;
}

 

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, Lightbox Studio plugin
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
On 4/6/2021 at 12:15 AM, hbakhsh said:

Site URL: https://collie-oriole-x7fl.squarespace.com/

I want the header to be transparent on the home page because there's an image in the first block that fits well with the design. However, the header styles are applied universally across the whole website making the site look more bland.

 

Thank you, help is very much appreciated!

 

On 4/6/2021 at 12:15 AM, hbakhsh said:

Site URL: https://collie-oriole-x7fl.squarespace.com/

I want the header to be transparent on the home page because there's an image in the first block that fits well with the design. However, the header styles are applied universally across the whole website making the site look more bland.

 

Thank you, help is very much appreciated!

Just found some small problems on your site.

Site URL: https://collie-oriole-x7fl.squarespace.com/

1. (Tablet-Footer) Want to change help & legal width?

collie-oriole-x7fl.squarespace.com-table

2. (Tablet-Homepage) Want to reduce shop collection text size?

collie-oriole-x7fl.squarespace.com-table

 

3. (Overlay Menu) Want to show logo/title on overlay menu?

collie-oriole-x7fl.squarespace.com-overl

4. (Tablet-Shop) Want to change to 2 products/row on tablet only?

collie-oriole-x7fl.squarespace.com-table

5. (Mobile-Shop) Want to show all nav links, or convert to dropdown, without scrollbar?

collie-oriole-x7fl.squarespace.com-mobil

6. (Mobile_Product Detail) Want to change 1/2 to an arrow slide?

collie-oriole-x7fl.squarespace.com-mobil

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
9 hours ago, tuanphan said:

 

Just found some small problems on your site.

Site URL: https://collie-oriole-x7fl.squarespace.com/

1. (Tablet-Footer) Want to change help & legal width?

collie-oriole-x7fl.squarespace.com-table

2. (Tablet-Homepage) Want to reduce shop collection text size?

collie-oriole-x7fl.squarespace.com-table

 

3. (Overlay Menu) Want to show logo/title on overlay menu?

collie-oriole-x7fl.squarespace.com-overl

4. (Tablet-Shop) Want to change to 2 products/row on tablet only?

collie-oriole-x7fl.squarespace.com-table

5. (Mobile-Shop) Want to show all nav links, or convert to dropdown, without scrollbar?

collie-oriole-x7fl.squarespace.com-mobil

6. (Mobile_Product Detail) Want to change 1/2 to an arrow slide?

collie-oriole-x7fl.squarespace.com-mobil

 

Hi there, yes that would be great if you could provide me with some help to do this. Do you charge for this?

Link to comment
2 hours ago, hbakhsh said:

 

Hi there, yes that would be great if you could provide me with some help to do this. Do you charge for this?

No. Helping on forum is free. Which issues you want to fix?

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
On 4/16/2021 at 11:02 PM, hbakhsh said:

Honestly I'd like to fix all of them, they all seem like reasonable changes to make.

Q1 + Q4. Add to Design > Custom CSS

/* Tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
/* footer */
div#page-section-604e1b206d3505175419885e .span-12 .span-4 {
    width: 60%;
}
div#page-section-604e1b206d3505175419885e .span-12 .span-8 {
    width: 40%;
}
/* Shop 2 items */
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}

Q2. It looks like you removed posters

Q3. Add to Design > Custom CSS

/* Overlay site title */
body.header--menu-open a#site-title {
    color: black;
}

Q5. Next comment. It will take some time to test code

Q6. Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

 

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
  • 2 weeks later...
On 4/19/2021 at 10:19 AM, tuanphan said:

Q1 + Q4. Add to Design > Custom CSS


/* Tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
/* footer */
div#page-section-604e1b206d3505175419885e .span-12 .span-4 {
    width: 60%;
}
div#page-section-604e1b206d3505175419885e .span-12 .span-8 {
    width: 40%;
}
/* Shop 2 items */
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}

Q2. It looks like you removed posters

Q3. Add to Design > Custom CSS


/* Overlay site title */
body.header--menu-open a#site-title {
    color: black;
}

Q5. Next comment. It will take some time to test code

Q6. Add to Design > Custom CSS


/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

 

Hi there, I was wondering if you could help me make it so 2 product images are displayed side by side on the homepage on mobile as currently the homepage is very vertically long making it quite tiresome to scroll through and the dimensions look off having so many products in a line compared to the text sizing

Link to comment
22 hours ago, hbakhsh said:

Hi there, I was wondering if you could help me make it so 2 product images are displayed side by side on the homepage on mobile as currently the homepage is very vertically long making it quite tiresome to scroll through and the dimensions look off having so many products in a line compared to the text sizing

Add to Design > Custom CSS

/* Products side by side */
@media screen and (max-width:767px) {
div#page-section-6079bee07809c62a4bc22f16 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6079bee07809c62a4bc22f16 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

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.