LearnDash Focus Mode Sidebar Menu: Hamburger Icon Color

Updated 2 years ago
by Dave Warfel
LearnDash focus mode hamburger menu icon example
Example of the LearnDash focus mode hamburger menu icon

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. hamburger menu with css gradient

.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%);

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)


✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.