Docs

[mariamohlin]

Hi!
I have searched the forum to solve this, but I can’t.
I want a transparent header and navigation. In my CSS I use:

.x-logobar {
	background-color: transparent;
	}
.x-navbar {
	background-color: transparent;
	}

.x-colophon {
	background-color: #fcfcfc;
	}

But it seems the changes don’t get through. Can you please help me?
The site is http://www.recondconcept.se

[John Ezra]

Hi there,

Thanks for writing in! It seems your logo and header are transparent but behind the entire site there is a white background. I made that transparent and made just the content area have a white background.

You will also need to adjust the color of navigation links so they will be visible. I added some styling for that too, thne for your footer areas, I just made the selectors more specific.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#top {
    background: transparent;
}

.x-main.full {
    background-color: #ffffff;
}

.x-main.full {}

.x-topbar .p-info, .x-topbar .p-info a, .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
    color: #333333;
}

.x-navbar .desktop .x-nav > li > a:hover {
    color: #000000;
}

footer.x-colophon.top,
footer.x-colophon.bottom {
    background-color: #fcfcfc;
}

Hope this helps – thanks!

[Author]

Posts