Header submenus

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

I have 38 sub-menus in a menu. I need Vertical scroll for Sub menus. How to add? Kindly give me suggestions.

2 Likes

Hi,

I saw this theme component because I want a header that has both menu and submenu items. However, it seems that this component forces me to have a submenu item for every header. I can’t add the url to just the header.

The menu is added via Text, icon, title, view
There is no url here. How can I add link to a menu item that has no submenu items?

2 Likes

Is it a challenge to make a two column list for desktop view? For those of us with several links, this would solve a big headache! (scrolling to the bottom of the list automatically closes the menu, which is a UX concern). Great work!

3 Likes

Hey Rolando, did you figure out how to do this yet?
I’m trying to do the same thing with no luck.
Cheers :slight_smile:

1 Like