Docs

[Ann]

Hey there,

How do I change the background of Ethos Archive and Blog page? I can’t seem to figure out how to have split colors, it’ll change all for me. I have attached a screenshot and where there’s yellow, I’d like a different color, while the white remain the same.

Another thing, I’d like a Hamburger menu on my page, I added code from another thread and the burger menu will appear, but won’t open when you click on it. I’m afraid I may have some code there causing the issue.

Site is under construction so I will provide login in another post.

Thanks so much for everything!

Best,
Ann

[Ann]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

To change archive background color, add this in your customizer > Custom > CSS:

body .archive{
background:#000;
}

Change the hex code to change the color.

And in regards to your humbergur menu, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.

Thanks.

[Ann]

Cool! Thanks!

Is there a specific code for Ethos or can I just search the knowledgeable for what to add to customizer?

[Ann]

Actually,

body .archive{
background:#000;
}

doesn’t work. I even tried

body .archive{
background:#000 !important;
}

but nothing.

[Ann]

I deactivated my plugins and added the code below, but same issue. I have the menu but nothing happens when you click it.

nav.x-nav-wrap.desktop {
display: none;
}

a.x-btn-navbar {
display: block;
float: right;
}

.x-nav-wrap.mobile.collapse.in {
display: block;
}

[Friech]

Hi Ann,

Actually that gray textured background is the site’s Background Pattern, which you can remove or replace under Appearance > Customize > Layout and Design.

I did go ahead and remove that Background Pattern, you can see the Background Color option just above that, feel free to change it.

Regarding the menu, please remove the previous code you added and use this instead.

@media (min-width:  980px) { 
	.masthead-inline .x-btn-navbar {
	display: block;
    	float: right;
	}
	.x-nav-wrap.mobile.collapse.in, .x-nav-wrap.mobile.collapse.in .x-nav {display: block;}
	.x-nav-wrap.desktop {display: none;}
}

Hope it helps, Cheers!

[Ann]

Awesome!!

That all worked perfect, thanks so much!

Ann

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts