Change Opacity of Extra Widget Area

Hello,

Can anyone let me know how I can reduce the opacity of the extra widget area?

I’ve set it as a purple, and when I set the page to use the featured image template the purple bar Ive made (the extra widget area) overlaps the bottom of the image.

If I can slightly reduce the opacity of the purple bar it will make for a really cool look!

I’ve been working on this page specifically: https://www.varii-promotions.co.uk/newcastle-promo-staff/

Any help is greatly appreciated!

Simon

Sorry I’ve just realised the extra widget area isn’t actually overlapping the header image.

Is there a way to get this to overlap from the bottom?

I’d ideally like the whole purple row widget covering the bottom of the header image, with a reduction in the opacity of the widget to let some of the header image coming through.

Sorry to spam messages to you guys!

Hi,

Did you mean like this?

If yes, then please try to put this code into Customize > additional CSS


.header-widgets{
    margin-top: -80px;
    width: 100%;
    position: absolute;
    opacity: .9;
    padding: 10px !important;
 }
@media only screen and (max-width: 768px){
	.header-widgets{
    margin-top: -40px;
 }
}
@media only screen and (max-width: 500px){
	.header-widgets{
    margin-top: -90px;
 }
}

That’s great thanks Awan!

Is there a way to make the purple bar less thick? I’ve reduced the padding
to zero but ideally want it to be even tighter, so less purple space above
and below the word “The Leading Nationwide Promotional Staffing Agency”

Best regards,
Simon

Simon PorterManaging DirectorT: 0117 214 0251M: 07761 388
422www.varii-promotions.co.uk http://www.varii-promotions.co.uk

You can decrease the padding value from the code in above. Then adjust all margin-top value to downward or upward the bar.

The code inside @media only screen and (max-width: 768px) means it work on the tablet screen.
Whether to code inside @media only screen and (max-width: 500px) means it works on the mobile screen

Great thanks Awan much appreciated!

Do you also know how I can get the page title into the centre of the header
image, and to be able to change the colour of the text?

I’ve already put this as a separate topic but haven’t had any responses to
it yet.

Thanks again for all your help!