# Header Submenus
**URL:** https://meta.discourse.org/t/header-submenus/94584
**Category:** Theme component
**Tags:** official, header-submenus
**Created:** [August 13, 2018, 9:50am UTC](https://meta.discourse.org/t/header-submenus/94584 "2018-08-13T09:50:07Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [August 13, 2018, 9:50am UTC](https://meta.discourse.org/t/header-submenus/94584/1 "2018-08-13T09:50:07Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Header Submenus** will allow you to build a header menu - with submenus - using plain text! |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/header-submenus) |
| š | **Repository Link** | [https://github.com/discourse/discourse-header-submenus](https://github.com/discourse/discourse-header-submenus) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=header-submenus "Ask for support on configuring and using Header Submenus") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=header-submenus "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=header-submenus "Discussion about the user interface of Header Submenus, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=header-submenus "Discussion about how existing Header Submenus features can be improved or enhanced, and how proposed new features could work")
### Features
Desktop
Mobile
### Settings
| Name | Description |
| --- | --- |
| Menu items | Add menu items. One item per line in this order: Text, icon, title, view. |
| Submenu items | Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title. |
| Svg icons | Include FontAwesome icon classes for each icon used in the lists above. |
| Fixed mode | Force the menu to be visible at the top of the screen regardless of scroll position - Desktop only |
| Show caret | Show caret icons next to menu items |
| Invert position | Display menu items on the opposite side of the screen |
| Menu background | Background color for the menu. (hex, rgb, rgba or CSS color name) |
| Menu item color | Color for menu items. (hex, rgb, rgba or CSS color name) |
| Menu-item-active-background | Background color for menu items when active. (hex, rgb, rgba or CSS color name) |
| Menu-item-active-color | Color for menu items when active. (hex, rgb, rgba or CSS color name) |
| Submenu background | Background color for submenus. (hex, rgb, rgba or CSS color name) |
| Submenu item color | Color for submenu items. (hex, rgb, rgba or CSS color name) |
| Submenu item hover background | Background color for submenus items when hovered. (hex, rgb, rgba or CSS color name) |
| Submenu item hover color | Color for submenus items when hovered. (hex, rgb, rgba or CSS color name) |
| Divider color | Color for divider lines in submenus. (hex, rgb, rgba or CSS color name) |
There are four groups of settings
1. **Menu items**
2. **Submenu items**
Hereās a quick example to cover points 1 and 2 above:
Letās say I want to add a menu item called `Design` and add a few items to its submenu like so
I would first enter this as a `menu_item`
`Design, magic, Get inspired!, vdm`
And then enter these as `sub_menu` items
`Design, Galleries, th, #, blank, Cool galleries for you to look at.`
`Design, Design process, lightbulb-o, #, blank, Learn the basics.`
`Design, Blog design, columns, #, blank, What makes for a great blog?`
`Design, divider`
`Design, Freebies, gift, #, blank, Everyone likes freebies!`
`Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.`
`Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!`
Thatās it!
The theme comes with a placeholder menu by default, so have a look at that and ask if you have questions.
1. **Layout options.**
2. **Color options**
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @JammyDodger 2024-06-12T21:46:41Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [May 14, 2020, 6:50am UTC](https://meta.discourse.org/t/header-submenus/94584/58 "2020-05-14T06:50:52Z")
I just pushed an update to this component.
[https://github.com/discourse/discourse-header-submenus/commit/cbb1c280f031024335cf3b103b0e2c242c5862b1](https://github.com/discourse/discourse-header-submenus/commit/cbb1c280f031024335cf3b103b0e2c242c5862b1)
There are no visual changes and if youāve added custom CSS to your theme, it should still work because the component still has the same classes.
I dropped the external library that the component previously used and jQuery by extension. I went through the issues reported here, fixed the one I could reproduce and then deleted the replies to keep everything tidy. If your problem still persists after the update, please feel free to post it.
Beyond that, the update only adds one new feature. The submenus will now show on hover on desktop instead of requiring a click.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 31, 2020, 6:54pm UTC](https://meta.discourse.org/t/header-submenus/94584/67 "2020-05-31T18:54:14Z")
Nice update Joe, Iāve only run into two problems on mobile.
1. You can no longer scroll side to side if you have a lot of menu items.
2. When you tap an item in the dropdown, the dropdown stays open
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [May 31, 2020, 7:10pm UTC](https://meta.discourse.org/t/header-submenus/94584/68 "2020-05-31T19:10:51Z")
> [@davidkingham](#):
>
> You can no longer scroll side to side if you have a lot of menu items.
This _should_ still work, but itās only on the mobile view. So, if you just test it the browser fake mobile view without changing the user agent, it wonāt work. Can you please confirm that youāre testing this on an actual phone. If so, can you let me know what device / browser youāre using?
> [@davidkingham](#):
>
> When you tap an item in the dropdown, the dropdown stays open
I see this too. The reason is that all the dropdown (opening / closing) behaviour is now handled with CSS instead of JavaScript. I donāt think CSS has a way to handle auto closing the dropdown after you click it. So, we have to fallback to JS for that particular issue. Iāll do it after you confirm the scroll issue on mobile.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [May 31, 2020, 7:15pm UTC](https://meta.discourse.org/t/header-submenus/94584/69 "2020-05-31T19:15:09Z")
This is on an iPhone 8 with the Discourse app, same in Safari. Thanks Joe!
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [July 4, 2020, 1:55pm UTC](https://meta.discourse.org/t/header-submenus/94584/70 "2020-07-04T13:55:51Z")
Any update on this Joe? Thanks!
---
### Author:  [@fidelio](https://meta.discourse.org/u/fidelio)
#### Post date: [July 17, 2020, 9:23am UTC](https://meta.discourse.org/t/header-submenus/94584/72 "2020-07-17T09:23:33Z")
Over at the Sponge community site they have a nice integration of this in the main header instead of an extra layer at the top:
> **[Sponge Forums](https://forums.spongepowered.org)**
>
> Sponge: A new Minecraft modding API combining the strengths of the server and client modding communities.
How can this be achieved? Would love it for our site.
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [July 17, 2020, 6:30pm UTC](https://meta.discourse.org/t/header-submenus/94584/74 "2020-07-17T18:30:44Z")
Can submenus be possible to header links? This theme component adds a new menu above the header, but some people donāt want a new navigation menu. They just want ability to hover over the current header links and have submenus.
---
### Author:  [@Hugh\_Roberts](https://meta.discourse.org/u/Hugh_Roberts)
#### Post date: [July 22, 2020, 12:48pm UTC](https://meta.discourse.org/t/header-submenus/94584/75 "2020-07-22T12:48:20Z")
That is nice. I wonder how they did it.
---
### Author:  [@ElForoViajero](https://meta.discourse.org/u/ElForoViajero)
#### Post date: [July 23, 2020, 11:43am UTC](https://meta.discourse.org/t/header-submenus/94584/77 "2020-07-23T11:43:09Z")
is someone having this issue? the social networks icons are not working (they were) and even using a different fa it wonāt show.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [July 23, 2020, 4:52pm UTC](https://meta.discourse.org/t/header-submenus/94584/78 "2020-07-23T16:52:36Z")
Have you tried the prefix of `fab`, since these are brands they need to have this prefix.
---
### Author:  [@ElForoViajero](https://meta.discourse.org/u/ElForoViajero)
#### Post date: [July 24, 2020, 10:11am UTC](https://meta.discourse.org/t/header-submenus/94584/80 "2020-07-24T10:11:06Z")
thansk for you reply @davidkingham I added the prefix fab, but the logo doesnāt appear.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [July 24, 2020, 10:13am UTC](https://meta.discourse.org/t/header-submenus/94584/81 "2020-07-24T10:13:47Z")
Donāt forget to edit the icons in the list of links also, you must include fab- prefix in these
---
### Author:  [@ElForoViajero](https://meta.discourse.org/u/ElForoViajero)
#### Post date: [July 24, 2020, 10:20am UTC](https://meta.discourse.org/t/header-submenus/94584/82 "2020-07-24T10:20:14Z")
Bingo! that was it š thanks a lot!
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [August 2, 2020, 8:14pm UTC](https://meta.discourse.org/t/header-submenus/94584/83 "2020-08-02T20:14:59Z")
Hi, Iām not sure why but the setting āMenu-item-active-backgroundā doesnāt seem to be working right. I believe it should just change the background color of the menu when I hover, however the selected color is completely covering up the text. See hereā¦
Also, the setting below it " Menu-item-active-color" doesnāt seem to do anything. Iāve tried different color codes and nothing changes when I go to test it.
Any ideas?
---
### Author:  [@Moksh](https://meta.discourse.org/u/Moksh)
#### Post date: [August 11, 2020, 7:46am UTC](https://meta.discourse.org/t/header-submenus/94584/85 "2020-08-11T07:46:52Z")
I would like to place the submenus below the site header instead of top. Could you please tell me how to do this? A code snippet would help š
---
### Author:  [@Moksh](https://meta.discourse.org/u/Moksh)
#### Post date: [August 12, 2020, 9:01am UTC](https://meta.discourse.org/t/header-submenus/94584/86 "2020-08-12T09:01:02Z")
> [@Johani](#):
>
> > [@davidkingham](#):
> >
> > 1. When you tap an item in the dropdown, the dropdown stays open
>
> I see this too. The reason is that all the dropdown (opening / closing) behaviour is now handled with CSS instead of JavaScript. I donāt think CSS has a way to handle auto closing the dropdown after you click it. So, we have to fallback to JS for that particular issue. Iāll do it after you confirm the scroll issue on mobile.
@Johani @davidkingham Did you find a solution for this problem āWhen you tap an item in the dropdown, the dropdown stays openā ?
Thank you
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [August 12, 2020, 2:16pm UTC](https://meta.discourse.org/t/header-submenus/94584/87 "2020-08-12T14:16:39Z")
No itās still behaving this way, one potential solution is to show only icons on mobile with no text, thoughts?
---
### Author:  [@Moksh](https://meta.discourse.org/u/Moksh)
#### Post date: [August 12, 2020, 2:18pm UTC](https://meta.discourse.org/t/header-submenus/94584/88 "2020-08-12T14:18:50Z")
How showing just icons on mobile solves the problem? "When you tap an item in the dropdown, the dropdown stays openā
---
### Author:  [@Moksh](https://meta.discourse.org/u/Moksh)
#### Post date: [August 12, 2020, 2:20pm UTC](https://meta.discourse.org/t/header-submenus/94584/89 "2020-08-12T14:20:59Z")
@ElForoViajero Your submenus seem to work okay on both desktop and mobile. As soon as you click the item in the menu, the screen refreshes and the menu closes automatically. Did you have to do something special?
> **[RTP LIVE: Situs Bocoran RTP Slot Terbaru | Info Pola Hoki RTP Pragmatic Play...](https://www.bowspeed.com/)**
>
> RTP Slot merupakan bocoran situs pola gacor terbaru rtp pragmatic play super scatter ter-akurat dengan winrate tertinggi dijamin memberikan kemenangan maxwin super jackpot bersama slot terbaru di tahun 2026 ini.
[Next page](https://meta.discourse.org/t/header-submenus/94584.md?page=2)