CSS tweak to always show app menu item names?

ℹ️ Support
1

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.

2

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
3

Perfect! Thanks for your help.

4

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;
}
5

Not sure if i get this right? Has this feature become a part of an NC release or do we still have to apply the hack? I’m asking in my 29.0.4 installation the icons still do not permanently show text nor have i found a place to configure this behaviour.

6

I’m still rocking my custom CSS. To my knowledge, Nextcloud hasn’t provided a native way to disable the autohiding.

1 Like
7

After updating to version 30.0.2 the above CSS sadly no longer works to disable the autohiding of the text below the icons.

Does anyone know how to fix it with custom CSS in this version of nextcloud? Any help is appreciated!

8

I too ended up here looking for this - it would great if the app menu would stay open as if it is being hovered over.

Also, old github issue: Disable hover effect on app menu (NC v15) · Issue #12778 · nextcloud/server · GitHub

9

I tinkered with the css and managed to get it working with the following

.app-menu {
    margin-top: 5px;
}

.app-menu .app-menu__list .app-menu-entry{
    width: 60px;
}

.app-menu__list .app-menu-entry__link .app-menu-entry__label {
    opacity: 100%;
    overflow: unset;
    top: 40%;
}

.app-menu__list .app-menu-entry__link .app-menu-entry__icon {
    margin-top: -30px;
    transition: all 100s ease-in-out;
}