Free CSS: Add the word "menu" to your hamburger menu

Yeah I don’t think the text-align applies to content loaded through content CSS. is the issue you are running into so need to define the centering via the container instead.

fixed (I think) and for admin gear too

Maybe this will reduce support tickets from admins asking where to do admin actions!

#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon::after{
	content: "ADMIN";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#ui-button-icon-8{
    bottom: -6;
	padding-top:5px;    
	margin-left: 0px;
    left: 4px;
}/* add text "admin" to admin gear menu */



#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-user-menu-button.ng-star-inserted > ui-button-icon::after{
	content: "MENU";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#ui-button-icon-3 {
    bottom: -6;
	padding-top:5px;
}/* add text "menu" to hamburger menu */

awe, you think people read, especially admins who complain about those who don’t read…. ;)

fantastic, thanks everyone. Is it all possible to apply the same logic to help resolve this issue by labelling these ILT buttons?

Absolutely should be possible! I can take a poke at it after the hols if you’re not familiar with CSS

note that text alignment can be tricky

I’m afraid I don’t have any CSS knowledge,  but I think i need to make that a goal for 2023. Sorry I forgot it was Thanksgiving (being based in the UK), so thanks for coming back to me during holiday season, to indicate it may be possible and Happy Thanksgiving..

What would be better - replacing the icons? Or words below. Words below can be confusing too. 

If you replace the icons and the user is in an area where custom css can’t apply then there’s no consistency, if words below are some places but not others but icons are identical, at least some reference point remains. 

latest updated css - docebo did something that broke my admin gear text and I fixed it finally

#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon::after{
	content: "ADMIN";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon{
	padding-top:0px;  
}
#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon button{
	margin-left: 3px;
	bottom: -6px;
}/* add text "admin" to admin gear menu */
/*
#doc-layout-internal-header button[aria-label='Admin Gear
Where the MAGIC happens™']*/




#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-user-menu-button.ng-star-inserted > ui-button-icon::after{
	content: "MENU";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#ui-button-icon-3 {
    bottom: -6;
	padding-top:5px;
}/* add text "menu" to hamburger menu */

This works like a charm! Thanks Irodman. We have so many users who are unaware of the meaning of “hamburger menu”. That said, I still get inquiries from people who can’t find the icon. Is there a similar CSS goodie to change the background color of the icon to something vivid?

Greetings community, I am not a CSS master, and I tried to add these labels to the user and admin menu, however it seems that the gear icon is placed in a higher position than the hamburguer icon, can you help me with configuration, so the gear icon appears at the same position than the hamburguer? Or recommmend what to do. 

Hey, there!
I’m having a bit of trouble. This is the code I’m using for my css:

#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon::after{
	content: "ADMIN";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon{
	padding-top:0px;  
}
#doc-layout-internal-header > nav > div.internal-header-navigation-group.internal-header-navigation-group-bordered.internal-header-admin-menu.ng-star-inserted > div > ui-button-icon button{
	margin-left: 3px;
	bottom: -6px;
}/* add text "admin" to admin gear menu */
/*
#doc-layout-internal-header button[aria-label='Admin Gear
Where the MAGIC happens™']*/




#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-user-menu-button.ng-star-inserted > ui-button-icon::after{
	content: "MENU";
    color:#888;
	font-size: 0.88em;
	font-weight: 600;
}
#ui-button-icon-3 {
    bottom: -6;
	padding-top:5px;
}/* add text "menu" to hamburger menu */

Which I could be wrong but it should be matching what’s above. However, I’m noticing that the word Menu at the top left...still has weird margins making the spacing look weird. Any idea what I could be doing wrong?

Having the same trouble as @MonseCan and @Matthew.Shumway.

The “icon” isn’t aligning with each other (ignore my non-straight line):

And the “menu icon” is cut off at the top, which creates a weird spacing between the word “Menu” and the icon:

​@helen.febrie did you ever get a solution to this?

Nope. I just didn’t use the CSS because it wasn’t feasible due to that problem.