# Header Submenus
**URL:** https://meta.discourse.org/t/header-submenus/94584
**Category:** Theme component
**Tags:** official, header-submenus
**Created:** [August 13, 2018, 9:50am UTC](https://meta.discourse.org/t/header-submenus/94584 "2018-08-13T09:50:07Z")
**Posts on this page:** 20
**Page:** 4
### Author:  [@LeoDavidson](https://meta.discourse.org/u/LeoDavidson)
#### Post date: [July 30, 2022, 7:54pm UTC](https://meta.discourse.org/t/header-submenus/94584/132 "2022-07-30T19:54:00Z")
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.)
---
### Author:  [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [August 3, 2022, 9:15am UTC](https://meta.discourse.org/t/header-submenus/94584/133 "2022-08-03T09:15:17Z")
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.
```plaintext
.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?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 5, 2022, 3:35pm UTC](https://meta.discourse.org/t/header-submenus/94584/134 "2022-08-05T15:35:06Z")
This and other themes will not work on the crawler view; the crawler view doesn’t load most of Discourse’s JavaScript.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [April 4, 2023, 3:26pm UTC](https://meta.discourse.org/t/header-submenus/94584/135 "2023-04-04T15:26:16Z")
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](https://meta.discourse.org/t/category-banners/86241) as it seems to be bumping the #main-outlet down an additional 40px on category pages. Thanks!
```plaintext
.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
margin-top: 40px !important;
}
```
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 7, 2023, 9:13pm UTC](https://meta.discourse.org/t/header-submenus/94584/136 "2023-04-07T21:13:20Z")
Thanks for pointing this out! I’ve just added some fixes here:
[https://github.com/discourse/discourse-header-submenus/pull/18](https://github.com/discourse/discourse-header-submenus/pull/18)
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [April 7, 2023, 9:32pm UTC](https://meta.discourse.org/t/header-submenus/94584/137 "2023-04-07T21:32:15Z")
Awesome, thank you Kris! Any idea why the `#main-outlet` is dropping down 40px?
```plaintext
#main-outlet {
padding-top: calc(1.8em + 40px);
}
```
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 7, 2023, 9:37pm UTC](https://meta.discourse.org/t/header-submenus/94584/138 "2023-04-07T21:37:29Z")
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](https://github.com/discourse/discourse-header-submenus/pull/19)
Update: that’s now merged, so the extra space will go away if you update the component.
---
### Author:  [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [April 9, 2023, 7:40pm UTC](https://meta.discourse.org/t/header-submenus/94584/139 "2023-04-09T19:40:00Z")
Where would a guy find the icon names?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 10, 2023, 3:43pm UTC](https://meta.discourse.org/t/header-submenus/94584/140 "2023-04-10T15:43:43Z")
I believe everything listed here is available for use: [Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome](https://fontawesome.com/v5/search?o=r&m=free)
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/lib/svg\_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/da0d20d4a99aab40bd08bf133a425be413521d5a/lib/svg_sprite.rb#L9)
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](https://github.com/discourse/discourse/tree/main/vendor/assets/svg-icons)
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`
---
### Author:  [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [April 10, 2023, 3:59pm UTC](https://meta.discourse.org/t/header-submenus/94584/141 "2023-04-10T15:59:59Z")
You rock, thanks so much
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [April 11, 2023, 12:55am UTC](https://meta.discourse.org/t/header-submenus/94584/142 "2023-04-11T00:55:50Z")
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 5, 2023, 12:09pm UTC](https://meta.discourse.org/t/header-submenus/94584/143 "2023-07-05T12:09:17Z")
2 posts were split to a new topic: [The component pushes down the chat, hiding partially the chat input](https://meta.discourse.org/t/the-component-pushes-down-the-chat-hiding-partially-the-chat-input/270645)
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 5, 2023, 12:10pm UTC](https://meta.discourse.org/t/header-submenus/94584/145 "2023-07-05T12:10:39Z")
2 posts were merged into an existing topic: [The component pushes down the chat, hiding partially the chat input](https://meta.discourse.org/t/the-component-pushes-down-the-chat-hiding-partially-the-chat-input/270645/4)
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [June 1, 2023, 5:57pm UTC](https://meta.discourse.org/t/header-submenus/94584/147 "2023-06-01T17:57:30Z")
Did anyone figure this out? I like the approach of not using additional space and reusing the resources already on the screen.
It’s really cool that hovering over the logo allows to navigate to blog, docs, or wiki!
---
### Author:  [@alxndr](https://meta.discourse.org/u/alxndr)
#### Post date: [June 25, 2023, 4:32am UTC](https://meta.discourse.org/t/header-submenus/94584/149 "2023-06-25T04:32:29Z")
FWIW the “svg icons theme setting” mentioned by Kris can currently be found in Admin \> Settings \> Other \> towards the bottom there’s `svg icon subset` (…I think this is correct??)
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [July 28, 2023, 7:55pm UTC](https://meta.discourse.org/t/header-submenus/94584/151 "2023-07-28T19:55:20Z")
There is a small z-index issue with the new Glimmer lightbox, 1001 just puts it above the lightbox because the lightbox is at 1000.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 28, 2023, 10:10pm UTC](https://meta.discourse.org/t/header-submenus/94584/152 "2023-07-28T22:10:55Z")
Classic z-index problem, it will be fixed the next time Discourse is updated
[https://github.com/discourse/discourse/pull/22865](https://github.com/discourse/discourse/pull/22865)
---
### Author:  [@clement](https://meta.discourse.org/u/clement)
#### Post date: [December 24, 2023, 4:49pm UTC](https://meta.discourse.org/t/header-submenus/94584/153 "2023-12-24T16:49:59Z")
Thanks for this nice plugin.
I wonder, is there a way not to display the header submenus when not logged in ?
Or, (as idea of development ?) may be better, what about having menu items displayed link to groups (trust levels or others) ?
Easy to ask for i know…
Thanks
C.
---
### Author:  [@Kieran\_Berryman](https://meta.discourse.org/u/Kieran_Berryman)
#### Post date: [January 3, 2024, 9:09pm UTC](https://meta.discourse.org/t/header-submenus/94584/154 "2024-01-03T21:09:55Z")
I don’t think this is anywhere else, apologies if so. I love using header submenus, but I have a lot of top headers, and it looks quite poor on mobile as a result. I would like to have it so that my headers don’t extend off-screen and cause me to scroll. Is this possible?
---
### Author:  [@Kieran\_Berryman](https://meta.discourse.org/u/Kieran_Berryman)
#### Post date: [January 3, 2024, 11:18pm UTC](https://meta.discourse.org/t/header-submenus/94584/155 "2024-01-03T23:18:55Z")
Okay I sorta solved my issue by just compiling all of the most important links as sub-menus into a “Navigational” top header on mobile.
[Previous page](https://meta.discourse.org/t/header-submenus/94584.md?page=3)
[Next page](https://meta.discourse.org/t/header-submenus/94584.md?page=5)