Transparent header


I would like the header image start at the very top of the page with the menu layered over it - like it is with the sticky menu when you scroll down.


Hello, can you post your page link please? Or tell us what settings are you using for the menu?


can you be more specific, what you mean?
I don´t see any settings that you can set to make the header transparent - it seems to have a default background, which I didn´t set a color to.

I meant what are your settings for menu from customizer? Transparent header cannot be set from customiser, depending of your settings it maybe can be achieved with custom css.

I don´t have any custom css for the header - can you provide the code to enter into the child theme to achieve the transparent header?

Please check image, and tell me how you set these checkboxes?

I’ll provide you with the custom css code afterwards.


Omg… you must have roll your eyes :smiley: sry.
Yes my navigation is on top (checked 1st box) and is sticky (unchecked 2nd box)

Huh, not so easy task. Apply custom css code below (you can use simple custom css plugin if you like):

@media screen and (min-width: 992px) {
    .top-bar {
        background-color: transparent;
        position: fixed;

div#undefined-sticky-wrapper {
        background-color: transparent;
        position: absolute;
    } {
        left: 0;
	.is-sticky .main-navigation li {
		padding: 20px 10px;
		-webkit-transition: none;
		transition: none;			

This code should work for desktop. Check your page with smaller screen resolutions if you want additional styling for them too.