Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
nickdepartee1570047746

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

Question

Does anyone have a solid piece of code that enables you to simply reduce the transparency/opacity of the header? I have the header fixed and simply want to allow some of the page content below to show through as scrolling happens.

Thanks!

Edited by rhyann

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 0

If you're using a colored background, you can use an rgba value (a being 'alpha') in your css. For example, 255, 0, 0, .5 would give you a red color with an opacity of 50%.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...