Header Submenus

[Johani (Joe)]

	Summary	Header Submenus will allow you to build a header menu - with submenus - using plain text!
	Preview	Preview on theme-creator.discourse.org
	Repository Link	https://github.com/discourse/discourse-header-submenus
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Samples

Desktop

Mobile

Settings

There are four groups of settings

1. Menu items

   Enter the items you want to appear on the menu. One comma-delimited item per line in this order

   Text, icon, title, view

   Text: what appears on the menu.
   Icon: the icon displayed next to the item. If you do not want to use an icon, use none.
   Title: the text that appears when the item is hovered.
   View: Choose what devices the item appears on.

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm appears on both desktop and mobile
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo appears on desktops only,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo appears on mobiles only.

   Due to lack of space, it is not recommended to add more than 3-4 items on mobile.

2. Submenu items

   Enter a list of the submenu items you want to add to your menu. One comma-delimited item per line in this order

   Parent, text, icon, URL, target, title

   Parent: the name of the parent menu item which this submenu item should show under. Use the text value from the list above.
   Text: the text that shows for this submenu item.
   Icon: the icon for this submenu item, use none if no icon is needed.
   URL: the path this menu item links to. You can use relative paths as well.
   Target: Choose whether this item will open in a new tab or in the same tab. Use blank to open the link in a new tab, or use self to open it in the same tab.
   Title: the text that shows when the item is hovered.
   Dividers: You can also add dividers between submenu items. To add a divider use parent, divider.

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.

3. Layout options.

   these are pretty self-explanatory

   

4. Color options

   These are empty by default, but if you add a color here, it will override the component’s defaults which are based on the current color scheme.

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

[Johani (Joe)]

I just pushed an update to this component.

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.

[davidkingham]

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

[Johani (Joe)]

@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.

[davidkingham]

This is on an iPhone 8 with the Discourse app, same in Safari. Thanks Joe!

[davidkingham]

Any update on this Joe? Thanks!

[fidelio]

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

How can this be achieved? Would love it for our site.

[AntiMetaman]

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.

[Hugh_Roberts]

That is nice. I wonder how they did it.

[ElForoViajero (elforoviajero.com)]

is someone having this issue? the social networks icons are not working (they were) and even using a different fa it won’t show.

[davidkingham]

Have you tried the prefix of fab, since these are brands they need to have this prefix.

[ElForoViajero (elforoviajero.com)]

thansk for you reply @davidkingham I added the prefix fab, but the logo doesn’t appear.

[Steven]

Don’t forget to edit the icons in the list of links also, you must include fab- prefix in these

[ElForoViajero (elforoviajero.com)]

Bingo! that was it thanks a lot!

[Sentinelrv]

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?

[Moksh]

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

[Moksh]

@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

[davidkingham]

No it’s still behaving this way, one potential solution is to show only icons on mobile with no text, thoughts?

[Moksh]

How showing just icons on mobile solves the problem? "When you tap an item in the dropdown, the dropdown stays open”

[Moksh]

@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?

El Foro Viajero