Header Submenus

quimgil · January 11, 2022, 6:53am

We are using this theme component and it fits our needs almost perfectly. Thank you!

Now are considering supporting more languages in our site. Can this component be localized, so that it follows the language of the interface?

Tris20 · March 27, 2022, 9:12am

Hold up, is this:

Because of this?

Relief GIFs | Tenor

Just noticed this morning on 2.9.0.beta2. I can’t tell you how much this improves the functionality of the header submenu theme component. I’m gonna spend today moving things around just because I can

Cozdabuch · April 25, 2022, 7:23am

Any way to add an admin/staff class to a drop down, or specific menu items.
No need for admin specific links, even if inaccessible, to be exposed. This would be useful

stance455 · May 23, 2022, 2:30pm

This custom menu looks really promising for the situation I’m in.

I have the JS version of discourse being served to Google, it’s looking good but I’m thinking of using this component to replace the current hamburger menu. Google is having trouble rendering the default JS hamburger menu.

1. Does this mean the menu doesn’t need Javascript to function? Or does it work similar to the original menu?

~~2. Can I hide the default hamburger menu while keeping this custom one enabled?~~ (Did this with CSS display none)

Edit: OK seems no JS is used for this menu.

Cozdabuch · May 25, 2022, 1:37pm

can we get a baked in setting to display only to logged in users? or at least display at a specific trust level or above so as to essentially display it to logged inn users only.

I would think the TL concept would be useful if for each header item, or list item, an additional customizable item per link for minimum trust level to display the menu/link as it can be used to display some links to everyone and other links to staff (TL4) only.

keegan · May 25, 2022, 9:31pm

@Cozdabuch
I have this feature built in on my dropdown-header component. Though its best to use that component instead only if you don’t have too many menu items since it adds the items directly inline with Discourse’s default header bar.

Cozdabuch · May 25, 2022, 10:32pm

@keegan thanks. I’ve been thinking of using that TC cause it is cleaner and I saw the customizable feature set.

I have about 5-8 links in each of 3 menus. I was worried it was too many to display well. Thoughts?

keegan · May 25, 2022, 10:36pm

@Cozdabuch the links inside the menus can be much more, its mainly the top level items that need to be less. If you have just 3 that should be perfectly fine.

stance455 · July 29, 2022, 1:19am

How would one go about enabling this for the crawler view?

Perhaps I can add something to the crawler html .erb file?

github.com

discourse/discourse/blob/fdd4c918478f2da82d547e0c012b05007a251751/app/views/layouts/crawler.html.erb

<!DOCTYPE html>
<html lang="<%= html_lang %>">
  <head>
    <meta charset="utf-8">
    <title><%= content_for?(:title) ? yield(:title) : SiteSetting.title %></title>
    <meta name="description" content="<%= @description_meta || SiteSetting.site_description %>">
    <%= render partial: "layouts/head" %>
    <%= render partial: "common/discourse_stylesheet" %>
    <%= theme_lookup("head_tag") %>
    <%= render_google_universal_analytics_code %>
    <%= yield :head %>
    <% if show_browser_update? %>
      <style>.buorg {position:absolute; z-index:111111; width:100%; top:0px; left:0px; background:#FDF2AB; text-align:left; font-family: sans-serif; color:#000; font-size: 14px;} .buorg div {padding: 8px;} .buorg a, .buorg a:visited {color:#E25600; text-decoration: underline;} @media print { .buorg { display: none !important; } }</style>
    <% end %>
    <%= build_plugin_html 'server:before-head-close-crawler' %>
  </head>
  <body class="crawler">
    <%= theme_lookup("header") %>
    <%= render partial: "layouts/noscript_header" %>
    <div id="main-outlet" class="wrap" role="main">

This file has been truncated. show original

LeoDavidson · July 30, 2022, 7:54pm

There seems to be a bug now when Fixed mode (always show the menu, even when scrolled down) is turned on.

I’m seeing this with Discourse 2.9.0.beta8, and also just reproduced it easily using the official Discourse theme preview site. I think I first noticed it about 2 weeks ago but I’m not entirely sure when it started happening.

To reproduce:

Turn on Fixed mode in the theme component’s settings.
Click on a thread with a lot of replies.
(If it’s the first time you’ve read the thread, and you’re at the very top, scroll down a few replies, go back to the thread list, then click the thread again, so you’re taken back to the post you were on.)

The amount of padding needed at the top of the page is miscalculated, resulting in the top of the post, and the name of the person who wrote it, being scrolled under the header and cut off.

You have to scroll up a bit every time you click on a thread, just to see whose post you’re reading.

You see this on entering the thread:

When you should see something like this:

What’s really strange is it does not always happen, and pushing Ctrl-F5 often fixes it. But it’ll happen again a little while later.

Editing the CSS to increase the amount of padding it adds to main-outlet sort-of fixes things, but then you get a lot of blank space at the top of topic lists. It seems like the topic lists and threads need different padding, or maybe one of them is adding the padding twice or some extra padding from somewhere else?

(Edit: Sometimes the page can’t scroll up far enough to see the problem. For example, when you go to the last post in a thread and it’s a short one, there’s no way for the header to overlap the poster’s name there, even if you scroll down as far as you can manually. That may account for some situations where things appear to work. Test with a browser window that isn’t very tall for the most reliable way to reproduce the bug.)

Tris20 · August 3, 2022, 9:15am

Is there any way to prevent this from showing on the login screen? I can do it with the following css, but this still presents the header submenu for a second, and then hides it.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

Is there a better way to prevent this from appearing during the static-login page?

awesomerobot · August 5, 2022, 3:35pm

This and other themes will not work on the crawler view; the crawler view doesn’t load most of Discourse’s JavaScript.

davidkingham · April 4, 2023, 3:26pm

Hey Kris, this component could use an update for use with the chat and sidebar. With the fixed_mode setting turned on, the chat and sidebar do not get moved down and sit behind the d-header.

The CSS below seems to fix things up nicely, except it doesn’t play well with Category Banners as it seems to be bumping the #main-outlet down an additional 40px on category pages. Thanks!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

awesomerobot · April 7, 2023, 9:13pm

Thanks for pointing this out! I’ve just added some fixes here:

github.com/discourse/discourse-header-submenus

UX: update fixed styling for sidebar & chat

discourse:main ← discourse:fixed-pos

opened 08:23PM - 07 Apr 23 UTC

awesomerobot

+24 -2

The `fixed_mode` setting needs updated styling to account for the sticky Discour…se header (formerly fixed). This also includes updating the sidebar height and top position, and chat's max-height to account for the custom header. Before (the top of the sidebar and chat are obscured): ![Screenshot 2023-04-07 at 4 20 57 PM](https://user-images.githubusercontent.com/1681963/230673926-dce4a4ed-1642-4a17-9eb4-b385a4f91624.png) After: ![Screenshot 2023-04-07 at 4 21 16 PM](https://user-images.githubusercontent.com/1681963/230673968-f9da752e-f08f-4eaf-8cff-36dc8b3e4cc4.png)

davidkingham · April 7, 2023, 9:32pm

Awesome, thank you Kris! Any idea why the #main-outlet is dropping down 40px?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

awesomerobot · April 7, 2023, 9:37pm

Ah I overlooked that — that can be removed, and will be once this PR is merged: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Update: that’s now merged, so the extra space will go away if you update the component.

P2W · April 9, 2023, 7:40pm

Where would a guy find the icon names?

awesomerobot · April 10, 2023, 3:43pm

I believe everything listed here is available for use: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Though some icons require an additional step… for icons we don’t use in Discourse by default the icon names needs to be added to the Svg icons theme setting.

If you really want to be specific, all the icons we use in Discourse by default are listed here: discourse/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

And all the icons available for use in themes (via the svg icons setting) are in this directory: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

Viewing the SVG files in github isn’t really helpful, because you’ll see a big white box:

but you can click the raw button and view the page source, the icon name is the symbol’s id

P2W · April 10, 2023, 3:59pm

You rock, thanks so much

davidkingham · April 11, 2023, 12:55am

Thanks Kris, that fixed it. I have noticed a couple of other issues though. .topic-navigation needs to be pushed down 40px, and .topic-post.sticky-avatar .topic-avatar seems to be calculated incorrectly when you scroll down, and it ends up behind the d-header. Also, it’s possible to expand the composer and chat window too high and lose the controls behind the d-header as well. I think that should cover everything!

Edit: one more thing, when you visit an anchor link the heading is under the header as well.