Header submenus

Bingo! that was it :slight_smile: thanks a lot!

2 Likes

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…

Menu-item-active-background

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?

1 Like

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 :pray:

1 Like

@Johani @davidkingham Did you find a solution for this problem “When you tap an item in the dropdown, the dropdown stays open” ?

Thank you

1 Like

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

1 Like

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

1 Like

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

1 Like

Sorry, I didn’t read your comment fully. I was thinking about the scrolling side to side problem I am also having.

2 Likes

I haven’t done anything special with it. What is your issue?

1 Like

When I tap an item in the menu, the menu stays open and the page refreshes. The menu is gone after you focus out of it. This behavior is more visible on mobile because the screen is small and you can’t see the page content as the menu doesn’t automatically close.

Are you using the newest version of submenus?

1 Like

The older version of submenus doesn’t seem to have this problem but it is not as slick as the new one. If you want to get rid of the bug that the menu doesn’t automatically close after you click the submenu, then use this old fork on github.

1 Like

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.

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:

3 Likes

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

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

1 Like

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

1 Like

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:

1 Like