Header Menu transparency

Hi there,

How can I make my Header menu transparent on every page, instead of showing black(default) background, I want my menu to be integrated to picture I have on every page.

Header Challenges on pages

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.site-header {
  background-color: rgba(255,255,255,0.3) !important;
} 

Adjust the rgba values necessarily.

R = red
G = green
B = blue
A = alpha (0 to 1); where 1 is solid.

Ref:

Regards,
Kharis

Hi Kharis,

The CSS it gave me turned into white background. What I meant is how could it look like the front page of a Sydney pro but just a picture not a slider for almost every page?

Hello there,

Please try this code:


body:not(.home) .site-header{
  background-color: transparent !important;
} 


Regards,
Kharis

Still did same thing. The picture was not on background of header menu

Hello there,

Please publicly share the image which you initially shared on Google Drive or somewhere else, so I could be more exact.

Regards,
Kharis

Here is what I have: http://authenticasset.com/authentic-mind/

and this is what I am trying to accomplish. https://www.orderdynamics.com/product/

Hello there,

Please try this code:


.page-id-287 .site-header{
  position: absolute !important;
  background-color: transparent !important;
}

Regards,
Kharis

It works, my follow up question though is do I have to insert CSS and change the page for all pages that I want same format OR is there another way to do that?

For other pages, you should update the code to become like this:


.page-id-287 .site-header,
.page-id-289 .site-header,
.page-id-290 .site-header{
  position: absolute !important;
  background-color: transparent !important;
}

Replace 289 and 290 with the respective page IDs. You can find it while you are editing it. In the browser’s address bar, you will see something like: http://yoursite.com/wp-admin/post.php?post=289&action=edit

Regards,
Kharis

Thank you Kharis,

Very helpful

You’re always welcome here.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello Kharis,

If I upgrade my theme, does it mean that I will lose this kind of change?

Estelle

Hi Kharis,

I upgraded my Sydney Pro and it looks like I lost this particular change when I am looking at my desktop, but seems fine on tablet and Iphone. I uninstall and reinstall the css and it is still not fixed. My header is transparent and it used to have the full picture on background of the menu.

Site below.

Hello there,

Please try to set a header background image from Appearance > Customize > Header area > Header Media. Make sure that site header image is enabled on header type options.

Regards,
Kharis

I am still having the same issue

Still not working

Hello there,

> If I upgrade my theme, does it mean that I will lose this kind of change?

Basically Sydney Pro is a new theme; if you have done some configuration in the customizer with the free version, you need to sync it by doing these steps.

Regards,
Kharis

Hello Kharis,

I am actually using SydenyPro, what I meant is update (not upgrade). And it seems like I lost most if not all custom CSS

Hello there,

Could you please tell me what actions did you take to update?

Regards,
Kharis