Custom Hamburger Menu Links

[rahim123]

There is a quirk with this method where the custom div disappears when toggling the visibility of the sidebar, for example if the browser window is narrow. This is a problem especially for tablets, which usually get the desktop version of Discourse and require clicking on the hamburger menu to display the sidebar. Any possible workarounds? Thanks!

---

Edit: Solved here:

Ability to add a custom section of links to the sidebar

@Ryan_Hyer Very nice! You figured out the way to make the items appear (or continue appearing) after the hamburger toggle event, which was the problem I was running into here: I also was able to hack your code into displaying what I want in the Community menu without being hidden under More: Head: <script> const links = [ // FontAwesome icons may need to be added in the site settings if they don't correctly appear { title: "User Directory", src: "/u?asc=true&cards=yes&order=usernam…

[bquast (Bastiaan Quast)]

Thanks @hosch and @Olivier_Lambert for making this.

Could you please explain to this newbie where I should insert this?

[bquast (Bastiaan Quast)]

How can I reorder elements in a sidebar / hamburger-menu section?

E.g. I want to put “All categories” above the categories in the “Categories” section, same with “All tags”.

Thank you!

[Jagster (Jakke Lehtonen)]

@bquast

where I should insert this?

You know now how to use a component for CSS, right? Add that on head-section.

@bquast

How can I reorder elements

You can’t easily. Yet anyway. It is no totally finished and polished at the moment.

[bquast (Bastiaan Quast)]

@Jagster

Add that on head-section

I tried this, it gave me an error on using a semicolon near src.

Let try again. Tnx

[MarcP]

@MarcP

I use internal links in this component, for example, I have a link that opens user invites: /my/invited/pending/

When opening the link from the sidebar I get: Oops! That page doesn’t exist or is private.

This is still a thing, the solutions after did not fix the issue.

Setting: Invite friends,/my/invited/pending/,f

Off-topic:

@asirota

image1920×1032 126 KB

I saw this condensed sidebar styling before, I can’t seem to find it anywhere. Is this a theme component?

[Canapin (Coin-coin le Canapin)]

@bquast

I want to put “All categories” above the categories in the “Categories” section, same with “All tags”.

You can use this CSS:

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

[Richie (Richie Rich)]

We’ve just had to change our navigation menu setting from “Legacy” to “Header Dropdown”, before it’s enforced on us:

Most of our custom hamburger menu links have now disappeared, and the two remaining links are both broken

Does this theme component support the new navigation @Johani ?

Here’s how our burger menu used to look under the “Legacy” option:

Here’s how how it looks under the “Header Dropdown” option:

Notable differences:

• Broken Link: Insurance
• Broken Link: Membership
• Missing: Drone Scene
• Missing: Good 2 Go
• Missing: Competitions
• Missing: Drone Code

Any advice or support would be very much welcomed

[Richie (Richie Rich)]

If it helps re the broken links, one example used to point to:

https://example.com/faq#insurance

But when you click on it now, under this new menu system, it now sends you to:

https://example.com/https://example.com/faq

[Richie (Richie Rich)]

@Canapin did you ever find a solution to your problem back in October 2022?

It might be the same problem we’re now facing.

[Canapin (Coin-coin le Canapin)]

I believe this component is/will be discontinued since you can now add custom sections /links to your sidebars

[Richie (Richie Rich)]

@Canapin

you can now add custom sections /links to your sidebars

We changed from “Legacy” to “Header Dropdown” as it’s the least disruptive, can we add custom links to the Header Dropdown menu?

[Lilly (Lillian)]

Yes, click/tap the “+” icon at the bottom of the drop down menu to create new custom sections. it should be right beside the keyboard shortcuts button. to edit sections, click the pencil icon beside the menu section header.

[Richie (Richie Rich)]

D’oh

Thanks @Lilly - I saw that and assumed it was for each user to customise their own menu

I’ll take a closer look at it now.

[Lilly (Lillian)]

@Richie

assumed it was for each user to customise their own menu

It is for both. As admin you get to see the Make this section public and visible to everyone checkbox at the bottom of the new custom menu section modal. if you don’t enable that, it is your personal menu. if you enable it, it is a global one.

Also, it looks like my menu customizing theme components work in drop down mode (just tested them).

[Richie (Richie Rich)]

Brilliant.

Thanks @Canapin and @Lilly this is the fix we needed

Now I just need to submit a feature request to be able to target the external links to a new browser tab

[JammyDodger]

I think they should respect the ‘Open all external links in a new tab’ user preference on your /my/preferences/interface page:

[Richie (Richie Rich)]

Ah, that’s good to know, thanks James.

I’m unsure what people will have that set to though

[JammyDodger]

You can set the default using default other external links in new tab

And even apply it historically:

Though this would only update it for those that were still on the default. If they’d changed it/changed it back/made a deliberate choice then it wouldn’t override it as it’s assumed they’ve set it to be how they want it. It tells you how many users it will change it for though, so it gives you a rough idea.

[Richie (Richie Rich)]

Man…

You people are just amazing

Thank you so much, I think this now gets us back to exactly where we were before this setting change