How showing just icons on mobile solves the problem? "When you tap an item in the dropdown, the dropdown stays open”
@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?
Sorry, I didn’t read your comment fully. I was thinking about the scrolling side to side problem I am also having.
I haven’t done anything special with it. What is your issue?
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?
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.
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.
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.
@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:
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.
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 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?
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:
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:
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…
Is that possible to use menu items with URL without dropdown?
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”.
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.
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!