Skip to main content
Question

Customise Header Message with CSS

  • May 29, 2026
  • 2 replies
  • 71 views
V
Novice I

We’re currently getting a lot of user queries regarding switching/ unenrolling from ILT sessions due to those options being hidden in a menu right out of the way. I was hoping to use the Header Message to highlight a resource showing people how to switch sessions as a way of reducing this. However, the header message itself is completely unformatted with no way to do so in the settings. I tried editing it with CSS but nothing I try seems to work.

Here’s where I got to:
 

app-layout-header-message {
  background-color: #a11fff;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
}

Has anyone managed to do this successfully?

2 replies

lrnlab
Hero III
Forum|alt.badge.img+10
  • lrnlab
  • Hero III
  • May 29, 2026

try it with this. I think you have the wrong container:

lmn-expandable-content .expandable-content.expandable-content-clamped { /* the element was section.expandable-content.expandable-content-clamped */
  color: crimson;
  font-style: italic;
  font-weight: bold;
}

you should be able too add other styling elements once you get it working. 

** Note this was done for the new navigation experience

V
Novice I
  • vGold87
  • Author
  • Novice I
  • June 12, 2026

try it with this. I think you have the wrong container:

lmn-expandable-content .expandable-content.expandable-content-clamped { /* the element was section.expandable-content.expandable-content-clamped */
  color: crimson;
  font-style: italic;
  font-weight: bold;
}

you should be able too add other styling elements once you get it working. 

** Note this was done for the new navigation experience

Thanks for your help! I tried this and it didn’t work either. After some digging I realise a rule further up the sheet was missing a “]” which was breaking everything below it! In the end, what worked for me was:

app-layout-header-message,
.app-layout-header-message {
  display: block !important;
  background-color: #FF5A5F !important;
  border-bottom: 3px solid #220F38 !important;   /* dark purple grounding line */
  padding: 12px 24px !important;
  text-align: center !important;
}


app-layout-header-message,
app-layout-header-message lmn-expandable-content,
app-layout-header-message .expandable-content,
app-layout-header-message p,
app-layout-header-message span,
app-layout-header-message div,
app-layout-header-message a {
  color: #26215C !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

 

Terms & ConditionsAccessibility statement