Jump to content

Custom CSS for opaque site title

Recommended Posts

Site URL: https://www.studio-smiths.com

I'm using Zion template on version 7.1 - 

Is there any way of having the site title header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

Also, is there any way of making a homepage image on mobile view mobile more centred or reduce the size of the image when on a mobile device only so you can see more of the background image? We seem to be having issues with moving our focal point when editing. 

Lastly, when we add an additional code to custom CSS do we just add it underneath any previous codes we have placed on there? 

Link to comment
  • Replies 3
  • Views 681
  • Created
  • Last Reply

Hi Tuanphan, 

 

Oops, I think I mean site header! 

Is there any way of having the site header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

So that the image is seen all the way to the top of the page with the header sitting across the top in an opacity of 50%. 

 

Link to comment
On 5/29/2021 at 11:47 PM, Courtney88 said:

Hi Tuanphan, 

 

Oops, I think I mean site header! 

Is there any way of having the site header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

So that the image is seen all the way to the top of the page with the header sitting across the top in an opacity of 50%. 

 

 

Add to Design > Custom CSS

/* desktop-homepage-header opacity */
@media screen and (min-width:992px) {
body.homepage header#header {
    background: rgba(255,255,255,0.5) !important;
}
}

 

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

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.