LearnDash Design & Tutorials

LearnDash Design & Tutorials

Avatar & Name in a Pill in the LearnDash Focus Mode Header

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

Phew! That title is a mouthful, huh? Here’s a quick image that illustrates what we’re talking about:


LearnDash avatar & name in a pill

We’re just applying some custom CSS to place the student’s name & avatar in a contained area with a background color (we’re calling it a pill). We’ll discuss the CSS needed to create this affect, and go over a few variations so you can customize it to your liking.

This only works in LearnDash focus mode. If you’re using the Design Upgrade Pro plugin, you need toΒ not disable the avatar or name. Both need to be visible for this to work.


Here is all the CSS you’ll need to create this effect. Place this code in Appearance > Customize > Additional CSS.

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	margin: 5px;
	padding: 0.25em;
	background: #eee;
	width: auto;
	border-radius: 50px;
	height: 40px;
	border: 0;

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-profile-avatar {
	width: 34px;
	height: 34px;
	border-radius: 100%;

.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
	border-right: 1px solid #e2e7ed;

Design Variations

There are a few ways in which you can customize this code to adjust your pill’s design.

Rounded Corners

The code above uses rounded corners that work really well for a circular avatar. But if you wanted to adjust the rounded corners, you can do that.

There are two border-radius values listed in the code. One is for 50px and the other for 100%. Change them both to 8px, or 4px, if you wanted to decrease the roundedness.

To give the pill square edges (ugh, that’d be a hard pill to swallow πŸ˜‚), you can change the border-radius values to 0.

Fill Entire Area

LearnDash avatar & name filled box

If you didn’t want the pill effect, but would rather apply a background color to the entire name+avatar rectangle…

  • keep your border-radius set at 0 (from above)
  • change the margin: 5px; to margin: 0;
  • change the height: 50px; to height: 40px;

Background & Text Colors

LearnDash avatar & name in a pill in black and white

You can easily change the background color of the fill area, as well as the text color of the student’s name.

  • change the background value from #eee to any color value you want
  • add an additional line to the top section of code (just after border: 0;) for color: #fff (or any color value you want)

Here’s how it would look to make the pill black with white text. Color changes are highlighted in bold.

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	margin: 5px;
	padding: 0.25em;
	background: #000;
	width: auto;
	border-radius: 50px;
	height: 40px;
	border: 0;
	color: #fff;

That’s all for now. Just a few simple CSS tips to improve the look of the avatar & name in LearnDash focus mode.


Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More β†’


The Best LearnDash Hosting: What to Look For + Top Recommendations


Remove Scrollbar When Focus Mode Sidebar is Collapsed


  1. Peter


    I have 2 questions:

    1. How can I turn off the avatar menu?
    2. How can I hide the text next to the avatar (‘hi, username”)?

    Do you have CSS code for these?

    Thank you!

    • Hi Peter,


      .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items {
      	display: none !important;


      .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-text {
      	display: none;

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén