Jump to content

Bedford: How do I edit the header transparency/opacity?

Recommended Posts

  • Replies 4
  • Views 8.7k
  • Created
  • Last Reply

The following will reduce the opacity of the header in Bedford. Copy and paste into Design > Custom CSS:

#header {  opacity: 0.4;}

You might want to experiment instead with making the header background color transparent. Substitute background-color: transparent; for opacity: 0.4; This may make the site title disappear. If so, put this too in Custom CSS:

h1#siteTitle a:link,h1#siteTitle a:visited {  color: #a39e9e;}h1#sitteTitle a:active,h1#siteTitle a:hover {  color: #ea4040;}

Adjust the colors to suit.

You may have to add !important to the individual property declarations to get them to take. E.g. opacity: 0.4 !important;

Let me know if any of this works for you.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment


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

This topic is now 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.