Burger toggle in Pro header displaying badly

[scotbaston]

Hi

I have a site in development that is due to go live at the end of the week.
There is a slight issue with the ‘burger’ toggle when you scroll down the page. when you scroll down the page, the middle of the three black horizontal lines (burger) slides up to half reveal white underneath

Can you please help me clean this up somehow?

I’ll post a link below

here is a screenshot of the issue

the example above is on the latest version of Chrome on a 15" Macbook Pro

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

span.x-toggle-burger-patty {
    background: #000;
}
.x-toggle>span {
    height: 3px;
}

Hope it helps

[scotbaston]

Hey @thai,

Thanks for that… it kind of worked but not quite!

on mobile view the 3 bars are too thick now, and most weird of all is on hover, only 2 of the 3 bars change colour!

any ideas please?

[scotbaston]

Actually, don’t worry I used your css except for the

span.x-toggle-burger-patty {
background: #000;
}

so
.x-toggle>span {
height: 3px;
}
on its own worked perfectly

[ruenel]

Great! It’s good to know that it works out for you.
If you need anything else we can help you with, don’t hesitate to open another thread.