How to set header on home page to transparent?

Hello,

Edit the home page > OceanWP settings metabox (below the editor) > Header and select Transparent header from the dropdown. Remove the code if you have added related to header. Clear cache and check it works or not.

Hi & thanks, Amit, I’d not looked there.

In the OceanWP settings metabox I’ve set:

Display Top Bar = Enabled
Display Header = Enabled
Header Style = Transparent

And I don’t believe I’ve added any code anywhere.

However, the header is still not transparent.

Question: I’ve added the header in the Appearance > Settings > Header option (ie the ‘standard’ WP dashboard) & I wondered whether I should have added it via ‘Featured Image’ in the OceanWP settings metabox?

Hi Amit @apprimit, I noticed you’d replied to my other question re security, thanks for that, but I wondered whether you might have any suggestions as to why I might still be having a problem with making my home page header image transparent?

I’ve looked at the settings you’d suggested as above and they seem correctly set, but the header is still not transparent.

Any suggestions or tips appreciated when you’ve got some time to reply.

Thank you

Hello,

I didn’t understand it clearly. Can you show me a screenshot or a little video about it?

Question: I’ve added the header in the Appearance > Settings > Header option (ie the ‘standard’ WP dashboard) & I wondered whether I should have added it via ‘Featured Image’ in the OceanWP settings metabox?

For the transparent header, try to remove the header media and check it works properly or not. If it will work, then let me know, I’ll give you some code to add a background image in the header.

• This reply was modified 5 years, 8 months ago by Amit Singh.

Hi Amit, apologies if I was unclear in what I was trying to do, but I now seem to have made things worse!!!

I tried removing my previous header image and uploading a new one, however that’s not showing on my home page at all.

I seems like I’ve somehow switched a setting to “no images”?

I tried uploading an image to my home page as a “featured image” but that hasn’t worked either (so I’ve deleted that image for now).

In the WordPress dashboard option, Customising > Header > Header Media, I’ve got al 4 of Position, Attachment, Repeat and Size all set to Default.

I’m not sure where else there are settings that control how the header image appears on the page.

Is there anything you might be able to suggest?

Amit, If it helps to diagnose the problem, I’ve noticed that if I go into
Customising > Header > General and then tick the box for Header Border Bottom I can see a line 1 px tall that has the same multi-colours from my header image, so there’s something I’ve set that’s stopping that image from fully appearing.

That line appears just below the main menu

Not sure what I’ve done to cause this?!?

The border settings just add a border below the header. You can turn on and off easily.

For the header transparent issue, add the below code to the Customize > Custom CSS section and check it fixes the issue or not. Clear cache to see the changes.

#site-header.has-header-media .overlay-header-media {
    opacity: .6;
}

Thank you, Amit,

It looks like I’m nearly there now – I appreciate your help on this one.

I think I still need to fine-tune my settings so as to enable the header image to show through from behind the text on the home page.

Since addding the CSS you provided I’ve gone into Customising > Header > General & made two adjustments:

I’ve set Style height to max 200 px and Bottom padding to max 100 px

This has given me the full header image, but it now covers part of the wording at the top of the home page.

I’ve set the image to be transparent but it seems there’s still something I need to adjust.

Would this be something that can be dealt with via customising CSS or is there an option I’ve not set correctly?

Thank you

P.S. I’ve left the website with the image covering the text so you might be able to see more easily where I’ve gone wrong.

Try to add position: relative; in the css code. It will fix the issue.

Hello Amit,

I’ve added the following CSS,

#site-header.has-header-media .overlay-header-media {
position: relative;
    opacity: .6;
}

but the image isn’t showing the page text through.

Did I mis-read your suggestion or is there a setting I might need to adjust?

Thanks

Use the below code to fix it.

#site-header.transparent-header {
    position: relative;
}

Hi Amit,

Thanks for that coding, which I’ve used and I’ve now got the header image behind the main menu as I wanted, however, I’m still stuck on enabling the header image to appear longer, ie to continue further down the page.

I’ve tried adjusting the pixel values in Customising > Header > General but that’s not helped.

Is there something I’m missing or if not, can this be accommodated with CSS coding?

I was hoping to get the image behind some of the top wording on the home page, however, this might perhaps be something that can only be achieved with one of the OceanWP paid for plugins?

Would you be able to let me know either way – thanks

I didn’t understand it clearly but I think you want to increase the height of the header, right? Go to Customize > Header > General and increase the top and bottom padding as per your need. Let me know if I misunderstood your query.