Docs

[bryan1976]

Hi,

It would be the cherry on top if you could let me know if it is possible to have a different header colour on some pages of my site.

The site is here: http://www.theaudiobarndev.co.uk

I really need the transparent header you see on the homepage, about, contact. But would like every other page with a black header NO transparency.

Can you help me please?

Many thanks – I love this theme…even as an amateur!

Bryan

[Christian]

Hey Bryan,

Under your home, about and contact pages’ Page Settings, insert opaque to the Body Class (see attachment).

You have this code in your Appearance > Customize > Custom > Global CSS

.x-navbar {
    width: 100%;
    background-color: rgba(0,0,0,0.5) !important;
    box-shadow: none;
    border: 0;
}

Change .x-navbar to .opaque .x-navbar. Then, add the code below in the Global CSS

.x-navbar {
    background-color: black;
}

Every page with the opaque class will have the opaque background.

Hope that helps. 🙂

[bryan1976]

Hi,

Thanks for this suggestion.

As an alternative, using this approach, would it possible to keep the background colour the same, rgba(0.0.0.0.5) but add a solid black background to the navbar on these pages only?

So you would have a transparent header over a solid background that scrolled up the page when you scroll down?

Hope this makes sense!

Thanks,

Bryan

[Christian]

It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks for understanding. Take care!

[bryan1976]

Hi Christian,

Many thanks for your response.

Is it possible on woo commerce pages (archive and single product) to have a section at the top which could be an image rather than just blank whitespace? This could start from behind the header like on our homepage here http://theaudiobarndev.co.uk which is a rev slider.

This would be a good workaround. You can see an example here: http://www.audionotelounge.com/shop-atc-loudspeakers/

Thanks for your suggestions.

Bryan

[Rupok]

Hi Bryan,

In that case you need to modify the WooCommerce Templates since they are controlled from templates. Kindly refer to this thread – https://community.theme.co/forums/topic/how-to-modify-woocommerce-base-page-listing-page-and-single-product-page/#post-165091

Cheers!

[Author]

Posts