Header title - hard to see in any colour

Hello - My header text is set to white and my photos that slide are all different types of light and dark. Therefore, any text colour will be hard to see. Especially the company name on the upper left hand side. There’s a black bar that appears on the header section as you scroll down the page. Is there a way to make this appear all the time?

Hi,

Can you share your site URL here?

Hi Awan

It’s Bigostrees.com.au

Dianne,

I had a similar problem and have temporarily solved it by creating a “header bar” for each of my chosen photos and saving the photos in this way. celebrantsorted.com/

Hi Tony

Thanks! I had a feeling it was going to be a work around instead of a correct fix.

Hi Diane,

Please add this CSS code into Customize > additional CSS:

.site-header {
    background-color: rgba(0,0,0,0.3);
}

It will add a transparent background color to the header area.

Regards,
Awan

Hi Awan - brilliant! Thank you so much. Can I please ask another favour?

After adding your code below, it has made the header area transparent on the desktop version (thanks!), but on a smaller device like my phone, it’s grey and looks a bit dull. Any chance I can choose a different transparent base colour?

Cheers
Diane

Hi,

It’s because the sticky menu has been disabled by default when the page displayed on a mobile screen.
So, I think it’s better to use solid color when in mobile screen and transparent color when in desktop screen. to achieve that, please use this code instead:

.site-header {
    background-color: rgba(0,0,0,0.3);
}
@media (max-width:768px){
  .site-header {
    background-color: #000;
  }
}

Thanks man! Much appreciated

1 Like