Header submenus

This component is fantastic, and with a little CSS tweaking I’m really happy with the result. Thank you for making it!

The one big issue I have is how difficult it is to insert a new item into the menus once they are set up.

I saw there was a pull request to replace all the individual text fields with a single large one, which I think would make a lot more sense.

Another alternative would be to let you import/export your configuration. (Maybe this is something that would need work on the discourse side, not the theme component? I am not sure.) If we could do that, then we could make the changes in a text editor and upload them, which would be fine. It would also make it easy to back them up.

(I thought maybe the Export button at the bottom of the component’s config UI might do this, but it seems to just save the component’s source code and default config, not my own.)

That aside, it’s great and has allowed us to add a lot more commonly-needed links to the top of our forum to help both our users and ourselves find things quickly.

4 Likes

This fork from a community developer has one large text area to add menu and submenu items. Old version but it still provided us what we need.

https://github.com/Canapin/discourse-header-submenus

3 Likes

@Canapin’s fork is a result of [PAID] Header Submenus UI modification - marketplace - Discourse Meta. We also find it does what we need.

But definitely don’t try to edit the submenus text in the box. We maintain the menu in a csv file and use this procedure, which is posted in a staff how-to topic:

  • Open the csv file in a spreadsheet app.
  • Edit the data. Generally you can just follow the pattern.
  • Save the csv file.
  • Open the csv file in a text editor.
  • Copy from the text editor and paste into the submenu items box.
  • Upload the csv file with your changes to this topic so it stays in sync.

Also worth noting, you can use some html tags and spaces in the csv to provide more organization and sub-sub-menus, which helps cram a lot of stuff on a phone:

5 Likes

i wonder how zoom got the menu working in the header section

3 Likes

This (drop-down menus) can be done with straightforward HTML / CSS, not anything to do with Discourse. You can press f12 and examine how they did it yourself, via the browser tools.

3 Likes

after reading a couple of posts i thought that the only way you could add links to the .d-header specifically, was with a component similar to what this component does only that this component creates an additional header above

after posting here i got the idea that a similar component like Custom Header Links could do the work if it’s tweaked like suggested on my post

3 Likes

After upgrading to latest, the header submenus “Fixed mode” (“Force the menu to be visible on top regardless of scroll - Desktop only”) does not work well. On the main page, it adds a lot of white space, and on other pages, the header submenu covers the main Discourse menu. I’m sure it’s related to:

but I don’t see that the css for this theme component is setting absolute position on d.header. Any ideas?

4 Likes

Which browser are you using? Can you share a screenshot of the problem?

This is what I see on the latest Discourse with “Fixed mode” enabled when I’m scrolled down the topic list:

1 Like

It’s the same with Chrome or Firefox on desktop. Mobile is ok.

Main page without “Fixed mode” (normal):







Main page with “Fixed mode” has extra whitespace:






Scrolled down the topic without “Fixed mode” (normal):






Scrolled down the topic with “Fixed mode”. Logo, Topic Title, Hamburger are covered by menu:

2 Likes

Do you have other custom CSS? It’s possible there’s some padding/margin on .docked .d-header or #main-outlet that’s clashing with Discourse updates…

4 Likes

Is that possible to use menu items with URL without dropdown?

1 Like

I would suggest Custom header links (icons) if you don’t need dropdowns- less drama and feels better integrated. I don’t know the answer to your actual question, but I’m guessing “no”.

2 Likes

I am currently using this plugin but since there is not enough space in the header section, I am plannig to put the dropdown menus on top. But I need to add URL’s top level menu.

Also, I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.

2 Likes

I have a feature request, since the scrolling issue can’t be resolved, how about an option to turn off the text in mobile so you only see the icons? There doesn’t seem to be a way to target just the text with css or I would just hide it that way. Thanks!

2 Likes

Hi there
When I install the “header submenus” component the component appears but overlaps my current forum header.
image (6)
The Discourse version I have is 2.4.1

Please if someone can guide me how to solve it.
Thank you.

1 Like

Have you tried updating your Discourse? It’s up to version 2.7.0.beta3.

2 Likes

Hi, thanks for your answer.

I have not updated the version yet.
Being a beta version I would not even dare to do it. I saw in the Discourse trial that it works.
If I take my version to 2.6 will it work?

Thank you for what you can guide me

Must be a bug. It can’t get this to work either. I just override it in css.

If I lost the plugin due to bad update, as an example, is there a way to upload only the menus that I typed instead of the entire forum?

It happened to me that I accidentally deleted the plugin but I cannot find a way to upload just the menu items from the Backup/Rollback process.

One more question, but really serious.

I found a great problem trying to hide some menus on some categories’ pages using css. The target menus contain not Latin symbols, because all menus are in different languages. And I can’t base css rules on classes in this case.

@Johani , can you add an ID number to every menu? This would solve this problem. Waiting for your reply!

Update: a simple solution would be to manually add an extra parameter with a unique id number to every menu we add in the component settings.

Update2: I solved the problem with this solution: Custom header with dropdown navigation

1 Like