CSS tweak to always show app menu item names?

In Nextcloud 24.0.1, the Dashboard includes a header row with icons listing all of the active apps. By default, only the icons are shown, and the text labels only appear when you hover over this bar (as I have in the following screenshot).

image

Is there any custom CSS I can add to make it so the text labels are always visible? I want this because many of the external links I have added have the same icon, and the text is necessary to disambiguate them.

In inspector, I see that the app menu is a <ul> element with ID appmenu, but (as someone who is not very proficient at CSS) I can’t see any :hover selectors anywhere relevant, which is why I decided to ask here.

The relevant code can be found at server/core/css/header.scss at ba88c2e1a2363d53b77ff3baf13be010076043c2 · nextcloud/server · GitHub

Install the app Custom CSS and try something like:

#appmenu li svg {
  transform: translateY(-7px)
}

#appmenu li span {
  opacity: .6;
  bottom: 2px;
  z-index: -1;
}

#appmenu li a::before {
  border-width: 5px;
}
1 Like

Perfect! Thanks for your help.

A recent update broke the solution graciously provided by @SysKeeper last year.

Here’s custom CSS that works on v25.0.3:

nav.app-menu .app-menu-main .app-menu-entry .app-menu-entry--label { 
    opacity: 100%;
}

nav.app-menu .app-menu-main .app-menu-entry img {
    margin-top: -8px;
}