On mobile:
“unlistify"
↓
On desktop:
I would like to change it because it may show in a more obvious way that there are some options waiting for being clicked, and there are wide blank spaces on the right of the toggle menu.
Hello,
It is possible with Overriding Discourse template. But I suggest to read the whole documentation.
In this case we have to find the navigation-bar template. Here you can find all templates. discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub
The navigation bar is a component so we can find this in the components folder. navigation-bar.hbs this is the template we want to use.
This is the navigation bar template on desktop view.
{{#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}} />
But wait… we know the navigation bar has a mobile version what we want to change to the desktop version so if we look at the templates closely we can see a mobile folder. In this folder we can find those templates which has got mobile version. For example the navigation bar. So we have to go to the mobile folder first than go to components and search the navigation-bar.hbs. We will override this template with the desktop version, what I pasted above.
From the documentation I linked above we know we should start like this:
With the data-template-name we have to target the template we want to override.
Now we know the route is: mobile → components → navigation-bar
<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
</script>
After this we just simple paste the desktop code inside:
Now you can paste this template in a component to mobile header section. 
<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>
Be sure your custom template is always up to date. If there is any change in the core navigation-bar template you should update your custom template as well to works everything fine.
On the default theme it looks like this 
Maybe need some CSS styling to fit to mobile. But it depends the theme you use.
For example the default theme has some border what I would hide.
Mobile / CSS section
.list-controls .nav-pills > li {
border: none;
}
2 Likes
Hi Don.
Sincerely appreciate your detailed, well explained guide, which is extremely helpful for someone like me who is not quite familiar with the code thing. 
With your text, not only did I successfully make the change, I also learned an useful skill, had a deeper understanding of Discourse.
Words can’t fully convey my gratitude. Have a nice day!
1 Like
By the way, I think you were referring to the head section.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.