# Есть ли способ изменить навигационное меню-переключатель на мобильном на обычный текст, как на десктопе?

**URL:** https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969
**Category:** Support
**Created:** [03.Август.2022 10:08:10 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969 "2022-08-03T10:08:10Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [03.Август.2022 10:08:10 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/1 "2022-08-03T10:08:10Z")

</div>

На мобильных устройствах:

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/7/5/4754254ffc69a2467ddea48026675dbb6404ef64.png)

«unlistify»  
↓

На настольных компьютерах:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/3/e/e3eb26b89c1439e3d93314dabffc5c77b33b647f.png)

Я хотел бы это изменить, чтобы более явно показать, что есть доступные для нажатия опции, а также чтобы устранить большие пустые области справа от выпадающего меню.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [03.Август.2022 12:33:49 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/2 "2022-08-03T12:33:49Z")

</div>

Здравствуйте,

Это возможно с помощью [переопределения шаблона Discourse](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#overriding-discourse-templates-23). Однако я рекомендую прочитать всю документацию.

В данном случае нам нужно найти шаблон навигационной панели. Все шаблоны можно найти здесь: [https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates).

Навигационная панель является компонентом, поэтому её можно найти в папке компонентов. Файл `navigation-bar.hbs` — это тот шаблон, который нам нужен.

Вот шаблон навигационной панели для десктопной версии:

```xml
{{#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}} />

```

Но подождите… мы знаем, что у навигационной панели есть мобильная версия, которую мы хотим заменить на десктопную. Если внимательно посмотреть на [шаблоны](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates), мы увидим папку **mobile**. В этой папке находятся шаблоны, у которых есть мобильная версия, например, навигационная панель. Значит, сначала нужно перейти в папку mobile, затем в components и найти файл `navigation-bar.hbs`. Мы заменим этот шаблон на десктопную версию, которую я привёл выше.

Согласно документации, на которую я ссылался выше, мы должны начать так:

С помощью атрибута `data-template-name` мы должны указать шаблон, который хотим переопределить.  
Теперь мы знаем путь: mobile → components → navigation-bar.

```xml
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">

</script>

```

После этого просто вставьте код десктопной версии внутрь:

Теперь вы можете вставить этот шаблон в компонент для секции **header** мобильной версии. 🙂

```xml
<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>

```

Убедитесь, что ваш пользовательский шаблон всегда актуален. Если в основном [шаблоне навигационной панели](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/navigation-bar.hbs) произойдут какие-либо изменения, вам также следует обновить свой пользовательский шаблон, чтобы всё работало корректно. 🙂

В теме по умолчанию это выглядит так 🔽

 ![Screenshot 2022-08-03 at 14.51.12](https://global.discourse-cdn.com/meta/original/4X/6/d/6/6d6c0831a0f4e025895f254c8b05c6bd6492df34.png)

* * *

Возможно, потребуется добавить стили CSS, чтобы это хорошо смотрелось на мобильных устройствах. Но это зависит от используемой вами темы.

Например, в теме по умолчанию есть некоторые границы, которые я бы скрыл.

Мобильная версия / Секция CSS:

```scss
.list-controls .nav-pills > li {
  border: none;
}

```

 ![Screenshot 2022-08-03 at 14.50.52](https://global.discourse-cdn.com/meta/original/4X/0/c/c/0cc03e9ef16bba8a8beeecd7742c54b483850533.png)

---

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [03.Август.2022 16:04:00 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/3 "2022-08-03T16:04:00Z")

</div>

Привет, Дон.

Искренне благодарю вас за подробное и хорошо объяснённое руководство, которое **чрезвычайно полезно** для таких людей, как я, кто не очень знаком с программированием. 😊 Благодаря вашему тексту я не только успешно внес изменения, но и освоил полезный навык, а также глубже понял Discourse.

Слова не могут полностью выразить мою признательность. Хорошего дня!

---

<div class="post-metadata">

### Author: ![Kuro22](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuro22/32/261055_2.png) [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [03.Август.2022 16:07:10 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/4 "2022-08-03T16:07:10Z")

</div>

> [@Don](#):
>
> в мобильный раздел **заголовка**

Кстати, я думаю, вы имели в виду раздел **head**. 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [02.Сентябрь.2022 16:07:13 UTC](https://meta.discourse.org/t/is-there-a-way-to-change-nav-toggle-menu-on-mobile-to-normal-text-like-on-desktop/234969/5 "2022-09-02T16:07:13Z")

</div>

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