Make overlay in header darker

Hi Gertrud…thank you for your comment about the theme.

Changing the opacity (the transparency) unfortunately cannot be done easily from the WordPress customizer, however, there is a way to make this change you are wanting.

First, you will need to create a custom stylesheet so that we can override the theme’s own styling. For this we will need a plugin like Simple Custom CSS to do this easily. In this new stylesheet, lets tackle the overall header part that is transparent which is done from this:

#banner-overlay {
    position: absolute;
    width: 100%;
    background-color: rgba(0,0,0,0.23);
    z-index: 999;
}

So to override this, we only need to copy this:

#banner-overlay {
    background-color: rgba(0,0,0,0.23);
}

Change the 0.23 that you see above to something higher, from 0-1. For example, you can go halfway as 0.50

That part of 4 sections separated by commas is for the transparency level where 0 is the 100% transparency and 1.0 would be solid colour.

We need to do this also for the submenu which will be done in a similar way, except it has a bit more code to it:

@media (min-width: 992px) {
.main-navigation ul ul {
    background-color: rgba(0,0,0,0.30);
}
}

By the way, very nice colour scheme you are using…it gives a lighter look and style.

Thanks for your quick and efficient response, it works like a charm!!!

I ll def rate your theme very high! <3

You’re very welcome and thank you. I look forward to your review and rating ??

One additional question related to this topic, Is there also an option in #banner-overlay that will adjust the size (length) of the banner overlay?

@cipettitt The forum moderators will probably request this, but because this topic is already set as “Resolved”, it’s best to repost your question as a new topic. If I can get you to do that, I will be more than happy to follow up there ??

Thanks

Thank you. I’m new to this so thank you for the guidance.
I have already opened a new topic.
Have a great day. ??