# Accessible optimization of the web menu bar

**URL:** <https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773>\
**Category:** ℹ️ Support\
**Tags:** a18y, nc31, design\
**Created:** [November 13, 2025, 1:32pm UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773 "2025-11-13T13:32:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mr.Groves](https://help.nextcloud.com/letter_avatar/mr.groves/32/5_5575768a8748004e209b776fc1b2916d.png) [@Mr.Groves](https://help.nextcloud.com/u/Mr.Groves)\
**Post date:** [November 13, 2025, 1:32pm UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773/1 "2025-11-13T13:32:31Z")

</div>

> ****
>
> ## Sorry to hear you’re facing problems. 🙁
> 
> _The community help forum ([help.nextcloud.com](http://help.nextcloud.com)) is for home and non-enterprise users. Support is provided by other community members on a best effort / “as available” basis. All of those responding are **volunteering their time to help you.** _
> 
> **If you’re using Nextcloud in a business/critical setting, paid and SLA-based support services can be accessed via [portal.nextcloud.com](http://portal.nextcloud.com) where Nextcloud engineers can help ensure your business keeps running smoothly.**
> 
> ## Getting help
> 
> In order to help you as efficiently (and quickly!) as possible, please fill in as much of the below requested information as you can.
> 
> **Before clicking submit** : Please check if your query is already addressed via the following resources:
> 
> - [Official documentation](https://docs.nextcloud.com) (searchable and regularly updated)
> - [How to topics and FAQs](https://help.nextcloud.com/c/how-to-faqs/9)
> - [Forum search](https://help.nextcloud.com/search)

Hello dear Nextcloud community,

I’m currently helping an association for people with disabilities (especially visual impairments) set up and customize a Nextcloud instance for their organization.

There are various special requirements regarding accessibility. Some of them were quite easy to implement, while others turned out to be more difficult.

At the moment, I’m trying to fulfill the request to make the icons and text in the top menu bar significantly larger—with proper spacing—so that users can see and use them more easily. Unfortunately, I’m having a hard time finding a good solution for this. I couldn’t find anything “out of the box,” or maybe I just missed it.

I’ve tried using custom CSS and a bit of ChatGPT assistance to achieve a good result, but so far without much success. Either it looks bad, negatively affects responsiveness, or both.

Does anyone have a good idea, a helpful hint, or know of a Nextcloud app that could make this easier to implement?

## The Basics

- Nextcloud Storage Box by Hetzner
- Nextcloud Server version _(e.g., 29.x.x)_:
  - `Version 31.0.8`

- PHP version _(e.g, 8.3)_:
  - `8.3.24`

Because a picture says more than a thousand words, here’s a screenshot showing what it currently looks like and what exactly I mean:

 ![Menüleiste](https://help.nextcloud.com/uploads/default/original/3X/1/2/12452a7a2d956dbeb2aff40b712b85a860d03264.png)

Below is the CSS file I put together with ChatGPT and a bit of trial and error:

```auto
:root {
    --menu-icon-size: 40px; /* Size of the icons */
    --menu-label-font-size: 14px; /* Font size of the labels */
    --menu-gap: 12px; /* Spacing between icon and label */
}

/* Container: height = icon + label + double spacing */
.app-menu-entry[data-v-9736071a] {
    --app-menu-entry-font-size: var(--menu-icon-size) !important;
    height: calc(var(--menu-icon-size) + var(--menu-label-font-size) + var(--menu-gap) * 2) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* vertically centered */
    align-items: center !important;
    margin-inline: calc(var(--menu-icon-size) * 0.15) !important; /* horizontal spacing between icons */
}

/* Icon */
.app-menu-entry__icon[data-v-9736071a] {
    font-size: var(--app-menu-entry-font-size) !important;
    line-height: 1 !important;
    margin-bottom: var(--menu-gap) !important; /* spacing between icon and text */
    transition: none !important;
}

/* Label always visible */
.app-menu-entry__label[data-v-9736071a] {
    opacity: 1 !important; /* always visible */
    position: static !important;
    transform: none !important;
    font-size: var(--menu-label-font-size) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important; /* allow line breaks */
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
    margin: 0 !important;
    transition: none !important; /* disable hover animation */
}

/* Hover: slightly bolder text, labels remain visible */
.app-menu-entry:hover .app-menu-entry__label[data-v-9736071a],
.app-menu-entry:focus-within .app-menu-entry__label[data-v-9736071a] {
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Active icon colored */
.app-menu-entry--active[data-v-9736071a] .app-menu-entry__icon[data-v-9736071a] {
    color: var(--color-primary-element) !important;
}

```

I hope I’ve provided all the necessary information to help you understand my problem.  
I’d be extremely grateful for any specific or general hints that could point me in a helpful direction.

Many thanks in advance and best regards.

---

<div class="post-metadata">

**Author:** ![scubamuc](https://help.nextcloud.com/user_avatar/help.nextcloud.com/scubamuc/32/63165_2.png) [@scubamuc](https://help.nextcloud.com/u/scubamuc)\
**Post date:** [November 15, 2025, 11:41am UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773/2 "2025-11-15T11:41:54Z")

</div>

Hey @Mr.Groves welcome back 👋

> [@Mr.Groves](#):
>
> I’m currently helping an association for people with disabilities (especially visual impairments) set up and customize a Nextcloud instance for their organization.

👍

> [@Mr.Groves](#):
>
> There are various special requirements regarding accessibility. Some of them were quite easy to implement, while others turned out to be more difficult.

i’ve pinged the [design team](https://cloud.nextcloud.com/call/gqff69i8) folks to assist (… that’s an open discussion by the way, so feel free) as this isn’t something the forum folks are familiar with.

> [@Mr.Groves](#):
>
> Does anyone have a good idea, a helpful hint, or know of a Nextcloud app that could make this easier to implement?

If you can, join the [design team](https://cloud.nextcloud.com/call/gqff69i8) discussion, or just be patient, there are some really clued up folks here that will sure be helpful regarding the necessary tweaks.

---

<div class="post-metadata">

**Author:** ![scubamuc](https://help.nextcloud.com/user_avatar/help.nextcloud.com/scubamuc/32/63165_2.png) [@scubamuc](https://help.nextcloud.com/u/scubamuc)\
**Post date:** [November 17, 2025, 8:26am UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773/3 "2025-11-17T08:26:46Z")

</div>

Hey @Mr.Groves we got a reply from the design team. They suggest trying [https://apps.nextcloud.com/apps/side\_menu](https://apps.nextcloud.com/apps/side_menu) the side menu app for customisations.

> **[Custom menu - Apps - App Store - Nextcloud](https://apps.nextcloud.com/apps/side_menu)**
>
> The Nextcloud App Store - Upload your apps and install new apps onto your Nextcloud

please keep us posted if this helps at all

---

<div class="post-metadata">

**Author:** ![Mr.Groves](https://help.nextcloud.com/letter_avatar/mr.groves/32/5_5575768a8748004e209b776fc1b2916d.png) [@Mr.Groves](https://help.nextcloud.com/u/Mr.Groves)\
**Post date:** [November 25, 2025, 9:48am UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773/4 "2025-11-25T09:48:34Z")

</div>

Hi @scubamuc ,

sorry for the late reply. Thank you very much for the great tip about the Custom Menu App. The installation was incredibly easy, and the customization options are exactly the solution I was looking for—without even knowing it. I’m really impressed, and so is the feedback from the end users I showed the solution to.

I have to emphasize once again how thoroughly impressed I am with Nextcloud, open source, and the ability to tailor everything to individual needs. Combined with a great and helpful community, it’s absolutely unique, and I’m grateful to be a part of it.

Thanks again for the quick and helpful support.

---

<div class="post-metadata">

**Author:** ![system](https://help.nextcloud.com/user_avatar/help.nextcloud.com/system/32/29333_2.png) [@system](https://help.nextcloud.com/u/system)\
**Post date:** [December 3, 2025, 9:49am UTC](https://help.nextcloud.com/t/accessible-optimization-of-the-web-menu-bar/235773/5 "2025-12-03T09:49:34Z")

</div>

This topic was automatically closed 8 days after the last reply. New replies are no longer allowed.