На мобильных устройствах:
«unlistify»
↓
На настольных компьютерах:
Я хотел бы это изменить, чтобы более явно показать, что есть доступные для нажатия опции, а также чтобы устранить большие пустые области справа от выпадающего меню.
Здравствуйте,
Это возможно с помощью переопределения шаблона Discourse. Однако я рекомендую прочитать всю документацию.
В данном случае нам нужно найти шаблон навигационной панели. Все шаблоны можно найти здесь: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates.
Навигационная панель является компонентом, поэтому её можно найти в папке компонентов. Файл navigation-bar.hbs — это тот шаблон, который нам нужен.
Вот шаблон навигационной панели для десктопной версии:
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
Но подождите… мы знаем, что у навигационной панели есть мобильная версия, которую мы хотим заменить на десктопную. Если внимательно посмотреть на шаблоны, мы увидим папку mobile. В этой папке находятся шаблоны, у которых есть мобильная версия, например, навигационная панель. Значит, сначала нужно перейти в папку mobile, затем в components и найти файл navigation-bar.hbs. Мы заменим этот шаблон на десктопную версию, которую я привёл выше.
Согласно документации, на которую я ссылался выше, мы должны начать так:
С помощью атрибута data-template-name мы должны указать шаблон, который хотим переопределить.
Теперь мы знаем путь: mobile → components → navigation-bar.
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
После этого просто вставьте код десктопной версии внутрь:
Теперь вы можете вставить этот шаблон в компонент для секции header мобильной версии. 
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
{{#each this.navItems as |navItem|}}
<NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>
Убедитесь, что ваш пользовательский шаблон всегда актуален. Если в основном шаблоне навигационной панели произойдут какие-либо изменения, вам также следует обновить свой пользовательский шаблон, чтобы всё работало корректно.
В теме по умолчанию это выглядит так 
Возможно, потребуется добавить стили CSS, чтобы это хорошо смотрелось на мобильных устройствах. Но это зависит от используемой вами темы.
Например, в теме по умолчанию есть некоторые границы, которые я бы скрыл.
Мобильная версия / Секция CSS:
.list-controls .nav-pills > li {
border: none;
}
Привет, Дон.
Искренне благодарю вас за подробное и хорошо объяснённое руководство, которое чрезвычайно полезно для таких людей, как я, кто не очень знаком с программированием. 
Благодаря вашему тексту я не только успешно внес изменения, но и освоил полезный навык, а также глубже понял Discourse.
Слова не могут полностью выразить мою признательность. Хорошего дня!
Кстати, я думаю, вы имели в виду раздел head.