NOTE
The hamburger menu icon only shows up on screens smaller than 768px
wide.
Default Menu
Use this CSS to change the color of the hamburger icon when viewing LearnDash content in focus mode on a mobile device. Change #000
to whatever color you’d like.
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span {
background: #000;
}
Expanded Menu
Add this CSS if you want to use a different color for when the menu is expanded. This is when the hamburger icon turns into an X.
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav.expanded span {
background: #000;
}
Gradient Hamburger
While I don’t believe a gradient hamburger exists in real life ????????, we can make one for our LearnDash mobile menu. You can use the following CSS to add a linear (left-to-right) gradient to the 3 bars of the hamburger icon.
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span {
background: linear-gradient(90deg, rgba(240,53,62,1) 0%, rgba(254,147,5,1) 100%);
}
You can change the rgba()
values to a simple hexadecimal code if you’d like, or play around with other color values. I recommend leaving the 0%
and 100%
values though.
And if you want the X to have a gradient as well, you might want to try switching it to a radial gradient.
.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav.expanded span {
background: radial-gradient(circle, rgba(240,53,62,1) 0%, rgba(254,147,5,1) 100%);
}