Burger colour mobile

[Toby]

HI

Im trying to change the colour of the burger on the mobile version to coincide with my coloured category pages / projects

www.tobyneilan.com

i have pasted in this this code - example given for "isolated" project

.slug-fashion .burger span {
background-color: #ff1900;
}
body[data-type="category"][data-id="5"] .burger span:before,
body[data-type="category"][data-id="5"] .burger span:after{
background-color: #ff1900;
}
body[data-type="project"][data-id="875"] .burger span:before,
body[data-type="project"][data-id="875"] .burger span:after{
background-color: #ff1900;
}

It works on the category pages but on the project page the middle bar of the menu remains white

have I missed something in my code?

Cheers
Toby

[mariusjopen]

Hi @Toby
you need to paste this code also in the MOBILE CSS section and not only in the DESKTOP CSS section.

I hope that solves the issue!

Best!

Marius

[Toby]

@toby said in Burger colour mobile:

body[data-type="category"][data-id="5"] .burger span:before,
body[data-type="category"][data-id="5"] .burger span:after{
background-color: #ff1900;
}
body[data-type="project"][data-id="875"] .burger span:before,
body[data-type="project"][data-id="875"] .burger span:after{
background-color: #ff1900;
}

Hi Marius
The code is already in my mobile css section - I added to my desktop section too
but the white middle bar still remains!?

Cheers
Toby

[Toby]

@toby

Hi Marius

Any clues to why the middle bar still remains white?

Cheers
Toby

[mariusjopen]

Hi @Toby
but now it seems to work, right?

Best!

Marius

[Toby]

@mariusjopen

Hi Marius

It does until you click through into the project pages and then the middle line turns white.

Cheers
Toby

[mariusjopen]

Hi @Toby
it looks like you need to add more custom CSS code.

Try to add this as well:

.burger span, .burger span:before, .burger span:after {
    background: red !important;
}

All the best and a happy new year!

Marius

[Toby]

@mariusjopen said in Burger colour mobile:

.burger span, .burger span:before, .burger span:after {
background: red !important;
}

Hi Marius

HNY

Thanks however adding that code turns the menu bar red throughout my website - overwriting the other colour changes I have for my categories - blue for architecture / green for portraits etc
is there a way to isolate that code to the project page?

Cheers
Toby

[mariusjopen]

Hi @Toby
exactly. Since you have different colors for different pages.
It is quite complex to adjust the colors. Quite a pain in the ass :-)

You need to play around with it. Things interfere with each other and the code can get quite messy.

You are almost there!

Good luck!!

Marius