Custom burger colour change on page?

aarondawkins

Hey!

I hope this finds you well.

I have one page on my site which has a black background. Is it possible to change a custom burger on this page to white with CSS? If so, can I have the CSS :) If tried everything hahaha.

Thank you!

Aaron

suzyy

@aarondawkins

No need for CSS, just go to Customize > Mobile (Smartphone) > Mobile Menu Icons > then set your burger icon color

aarondawkins

Hey @suzyy

Thanks for the reply. I have a custom burger and I only want to change the colour on one page. All pages on my site have a white background and there is one page that has a black background I would like to change the burger to white on this page. Can you help?

suzyy

put this in your CSS (you have to put the appropriate page slug where it says PAGETITLEHERE)

.slug-PAGETITLEHERE .burger-default span, .slug-PAGETITLEHERE .burger-default span:before, .slug-PAGETITLEHERE .burger-default span:after {
background-color: #HEX;
}

Figure out the slug/page title of the page (right click inspect element and view the slug attached to the <body> tag like slug-home slug-about etc.)

aarondawkins

Hey @suzyy thank you, but I'm sorry this doesn't work. Maybe if take a look at the site you will get a clearer idea.

https://poesis-oracle.com

This is the page that needs a white burger on mobile: https://poesis-oracle.com/library - just so you know the burger is custom.

@mariusjopen @arminunruh a little help here? :)

Thank you.
Aaron

Richard

Dear Aaron @aarondawkins

Hope this helps :)

First we need to isolate to only select the page Library:

.slug-library{

}

then nested within that page will be the burger you want white ; we target nested items with css by adding a 'space' " " between classes on a CSS line:

.slug-library .burger-wrap{

}

However we reach a problem: your Burger menu isn't made purely of CSS so we cant just change its color so easily. Its an SVG that you have uploaded:

https://poesis-oracle.com/wp-content/uploads/2021/01/burger-1.svg
Are you able to upload the same but in white? or this doesnt work for your needs - I noticed the the 'X' close burger Icon is a white SVG that you have loaded - Just wish to understand what is going on :)

Best wishes Aaron and talk soon
Sincerely
Richard

suzyy

@aarondawkins said in Custom burger colour change on page?:

Hey @suzyy thank you, but I'm sorry this doesn't work. Maybe if take a look at the site you will get a clearer idea.

https://poesis-oracle.com

This is the page that needs a white burger on mobile: https://poesis-oracle.com/library - just so you know the burger is custom.

@mariusjopen @arminunruh a little help here? :)

Thank you.
Aaron

would've been helpful at the start, as richard stated you've uploaded an .SVG for the hamburger so my code won't work (it was made for the default).

try this in your custom javascript:

<script>
document.querySelector(".slug-library .burger-inner img").src = "url of white hamburger svg file here";
</script>

Lay Theme Forum

Custom burger colour change on page?

Before you post:

When you post:

Online Users