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

  • 9 November 2022
  • 8 replies
  • 79 views

Userlevel 6
Badge +3
#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.92em;
text-align: center;
font-weight: 600;
top: -6;
}
#ui-button-icon-3 {
bottom: -8;
}/* add text "menu" to hamburger menu */

Having minor spacing issues - pretty sure my text-align does nothing


8 replies

Userlevel 7
Badge +1

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.

Userlevel 6
Badge +3

 

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 */

 

Userlevel 7
Badge +1

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

Userlevel 4
Badge +1

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

 

Userlevel 6
Badge +3

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

Userlevel 4
Badge +1

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..

Userlevel 6
Badge +3

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

Userlevel 7
Badge +1

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. 

Reply