Top Menu Transparent on Header

Hi,

How do I get the menu bar to be transparent and sit on top of the header image - pretty much like the Sydney theme.

Thanks in advance!

Hi,

Please post a link to your website, so we can check if that’s possible with Rocked Theme.

Best Regards,
Csaba

Hi Csaba,

It’s www.sphereo.xyz

Thanks!

Hi,

On this page the menu background color is already transparent.

Best Regards,
Csaba

Ok but if we didn’t figure it out on our own how do we do it?

CarteBlancheM.com

Hi,

You can make the top menu transparent with this Custom CSS:

.header {
    background-color: transparent !important;
}

.header-image {
    margin-top: -80px !important;
    z-index: -99 !important;
}

#header.upscrolled {
    background-color: white !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

I am working with the sydney (child) theme on two different domains. One is the www.storeroomstudios.de. I would like to habe the main menue background transparent. I already tried the different CSS-Codes from the forum here. But in vain. It would be great to get help from you! Thank you!

Christiane

Hi @Christiane,

You can make the menu transparent on Sydney Theme using this Custom CSS:

.site-header {
    background-color: transparent !important;
}

.page-template-page_front-page .page-wrap {
    padding: 0;
    margin-top: -140px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba