Header submenus

theme-component

(Joe) #1

This component relies on the new interface for adding long lists that Joffrey created recently :heart_eyes:
Because of that, you need an up-to-date beta-branch Discourse install to use it.


This is a theme component that will allow you to build a header menu - with submenus - using plain text!

Repository link
https://github.com/discourse/discourse-header-submenus

Preview:
https://theme-creator.discourse.org/theme/Johani/header-submenus


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

4

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.

    these are pretty self-explanatory

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

Credits

This component uses Cory LaViska’s lightweight jquery-dropdown library but since it’s so tiny, it’s bundled in the theme and there are no extra HTTP requests.


Introducing Font Awesome 5 and SVG icons
Best way to customize the header
Custom hamburger menu links
Custom hamburger menu links
Introducing Font Awesome 5 and SVG icons
Easy responsive footer
Mobile formatting just broke
Custom Header Links
(Gregory Reyes) #2

Hey @Johani!

Awesome job. Apologies because this might be a noob question but how did you organize the categories and topics in your sample? The Category’s on the left side with the latest Topics of each Category seen on the right side. It’s something I’m interested in applying.

All the best!


(Joe) #3

You do this by setting the category page to be the homepage.

The easiest way to set it up is to go to
your.site.com/wizard/steps/homepage

and select categories as the homepage.


#4

I think this is the most underrated theme component here :smiley:

Is there any way to place the menu in the header for desktop version?
Also is there any way to make it responsive or horizontally scrollable on smaller screens?


(David Kingham) #6

Great component! I’ve been digging into it and have some issues and requests:

Issues:

  • Carets still show when show caret is unchecked
  • One of the menus is opening a new window with no content. Go here and click Archive. Yet I have a submenu under this which you can see after you close the new window.
  • Does not follow the theme’s colors, I had to override them all
  • Does not display on mobile at all, I tried disabling all other components and it still does not display

Requests:

  • Make icon resizable
  • Make height adjustable while keeping menus centered
  • Ability to change color of icon, I can’t seem to even force it with .top-menu .d-icon {color: #feda6a !important; }
  • The ability to have a link without a dropdown, preferably with no caret on that one but have a caret on the rest.

(hosna) #11

Is this compatible with RTL websites?

What is the difference between this component and the following?


#12

Brand header theme component doesn’t have dropdown submenus.


(David Kingham) #13

Do you have any plans to update this @Johani or should I throw it out to the marketplace? Thanks!


(Joe) #14

I pushed a few changes:

I’m afraid this out of the scope for this component.

This is a good idea :+1: the menu will scroll horizontally on mobile now

:white_check_mark:

I can’t reproduce this issue, let me know if it still happens after the update.

The component does follow the current color-scheme. Most of the colors are based on the text colors in your site

If you’re not happy with how the colors come out for your scheme you can override them via the component’s settings.

I’m not sure what happened here, but try again after updating and let me know as well.

You can resize the icons with CSS in a theme component

Something like this for menu items

.top-menu .wrap>a .header-menu-icon {
  height: 2em;
  width: 2em;
}

1

and like this for icons in dropdowns

.top-menu .wrap>div .header-menu-icon {
  height: 2em;
  width: 2em;
}

2

You should be able to change the height and everything will stay aligned now. You’d use something like this:

.top-menu .wrap {
  height: 60px;
}

That should work even without !important. Can you try again after the update?

you can use

.top-menu .wrap>a .header-menu-icon {
  color: red;
}

for menu icons and use

.top-menu .wrap>div .header-menu-icon {
 color: red
}

for dropdown icons

This is outside of the scope of this component for now.

Yes, there’s a component setting to enable RTL support


Navigation Panel Overlaps Header? (Mobile)
Navigation Panel Overlaps Header? (Mobile)
(Per Torstensson) #15

Super great additions, thank you @Johani!

In addition to icons next to the links, would it be feasible to add the possibility to add emojis via :slightly_smiling_face: or images via <img src="...">?

All the best!


#16

Very handy addon, using this now to help users transitioning from more structured forums get used to discourse’s navigation and layout. One thing I did notice is that the fixed mode results in an issue where scrolling down results in a transparency glitch where the scrolling area shows through the menu bar. Is there a suggested css fix to force the menu bar to the top layer?


(David Kingham) #17

I’m finally getting around to setting this up fully and the improvements are greatly appreciated! Just a couple little things:

The ‘home’ icon will not display even though I have fa-home in the svg icons list. All the other icons are showing up just fine.

The colors look good for my dark theme, but my light theme is not changing, the colors are the same as my dark.

To see both issues go to https://community.naturephotographers.network/ and select ‘Test’ for the theme in the hamburger menu. There is no css applied to this theme.


(Penar Musaraj) #18

This happens because there is a dropdown with id="home" in your site’s HTML:

That confuses the SVG tag. If you try with “NPN Home” instead of “Home” for example, you might notice the icon then displays.

@Johani it might be a good idea to add a prefix to the id’s of the dropdown items (it would fix the issue just above). What do you think?


(Jeff Atwood) #19

No, I think we have legitimate rights of ownership on naming here. It’s on the other folks to add prefixes, not the owners.


#21

hey gents!
I just installed Header submenus but the menu don’t appear.
When I force the menu to be visible on top regardless of scroll, I got this:
https://gyazo.com/1153ed4dfb1cec30922b5980874fd0c0

I have this issue on chrome: Version 72.0.3626.121 (Official Build) (64-bit)
Seems fine with firefox, this is a known issue or something ?


(Daniela) #22

No repro, it works even on Chrome with the dark theme

Did you add the theme component to the main dark theme? If so, did you try with an hard refresh?

Are you on the latest version of Discourse?


(Jimmy) #23

I noticed in the version I installed, assuming it was up to date, had the CSS for the submenu item hover inheriting the color, rather than using the submenu hover color chosen. It was a quick fix though:

&:hover {
  background-color: $submenu-item-hover-background;
  color: inherit;
  cursor: pointer;
}

to

&:hover {
  background-color: $submenu-item-hover-background;
  color: $submenu-item-hover-color;
  cursor: pointer;
}

Along those lines, I also needed some assistance in changing the javascript so that I simply have to hover over the menu to have it open, rather than clicking. When I tried changing it from click to hover, that didn’t work. I’m wondering if I need to add some kind of listener to see if I hover over the menu before it triggers the hover event? Or maybe I used the wrong method?


(cosmo) #24

any chance to add option to hide if “not logged in”


#25

For the whole menu ?

You can add this css to add the entire top menu for anonymous users

.anon .top-menu {
    display: none;
}

(cosmo) #26

well then. that would work too. :slight_smile: