I noticed that the Sitepoint forums have links within the Discourse header itself. How was this achieved? I came across a post that suggested adding links above the header and then using CSS to position them so it looks like they’re part of the Discourse header. I’d prefer not to do it this way but to add markup directly in the normal header if possible. I was thinking a plugin, but I can only add markup where a plugin outlet exists right?

We use a plugin where we override the entire header template. Specifically assets/javascripts/discourse/templates/header.hbs master {{! SP CUSTOMIZATION - ENTIRE FILE }} {{!-- {{home-logo minimized=showExtraInfo}} --}} --> <path d="M0 6.39C0 7.218 0.144 8.01 0.45 8.802C0.738 9.594 1.17 10.296 1.71 10.908C2.25 11.52 2.88 12.024 3.636 12.402C4.374 12.798 5.202 12.978 6.102 12.978C6.606 12.978 7.11 12.924 7.632 12.78C8.154 12.654 8.658 12.456 9.126 12.204C9.594 11.952 10.008 11.646 10.386 11.286C10.746 10.926 11.034 10.494 11.25 10.008L9.576 9.054C9.396 9.432 9.18 9.756 8.928 10.008C8.676 10.278 8.388 10.494 8.082 10.674C7.776 10.854 7.452 10.98 7.128 11.052C6.804 11.124 6.48 11.16 6.174 11.16C5.562 11.16 5.022 11.034 4.518 10.782C4.014 10.53 3.564 10.17 3.204 9.738C2.844 9.306 2.556 8.82 2.358 8.244C2.142 7.686 2.052 7.092 2.052 6.462C2.052 5.922 2.124 5.364 2.304 4.806C2.484 4.266 2.736 3.762 3.078 3.312C3.42 2.88 3.852 2.52 4.356 2.25C4.86 1.98 5.436 1.836 6.12 1.836C6.408 1.836 6.732 1.872 7.056 1.944C7.38 2.016 7.686 2.124 7.992 2.268C8.28 2.43 8.568 2.646 8.82 2.898C9.072 3.168 9.288 3.492 9.468 3.87L11.052 2.808C10.62 1.98 10.008 1.314 9.18 0.791999C8.352 0.287999 7.344 0.0179996 6.192 0.0179996C5.22 0.0179996 4.338 0.215999 3.582 0.575999C2.808 0.953999 2.16 1.44 1.62 2.052C1.08 2.664 0.684 3.348 0.414 4.104C0.126 4.86 0 5.634 0 6.39Z" transform="translate(12.6299 7.12988)" fill="#3A3A3A" /> <path d="M19.5616 12.96C20.4256 12.96 21.2356 12.798 21.9916 12.438C22.7476 12.078 23.3956 11.61 23.9536 11.016C24.4936 10.422 24.9256 9.738 25.2316 8.946C25.5376 8.172 25.6996 7.362 25.6996 6.498C25.6996 5.706 25.5376 4.914 25.2496 4.14C24.9616 3.366 24.5476 2.664 24.0076 2.052C23.4676 1.44 22.8376 0.953999 22.0816 0.575999C21.3256 0.197999 20.4976 0 19.5976 0C18.6976 0 17.8876 0.18 17.1316 0.539999C16.3756 0.899999 15.7276 1.368 15.1876 1.962C14.6476 2.574 14.2156 3.258 13.9096 4.032C13.5856 4.824 13.4416 5.634 13.4416 6.48C13.4416 7.308 13.5856 8.1 13.8736 8.874C14.1616 9.666 14.5936 10.35 15.1336 10.962C15.6736 11.574 16.3036 12.06 17.0596 12.42C17.8156 12.78 18.6436 12.96 19.5616 12.96ZM15.4936 6.48C15.4936 5.904 15.5836 5.346 15.7636 4.788C15.9436 4.23 16.2136 3.726 16.5736 3.294C16.9156 2.862 17.3476 2.52 17.8516 2.25C18.3556 1.98 18.9316 1.836 19.5796 1.836C20.1916 1.836 20.7316 1.98 21.2356 2.232C21.7396 2.484 22.1536 2.826 22.5136 3.258C22.8736 3.69 23.1436 4.176 23.3416 4.734C23.5216 5.292 23.6296 5.868 23.6296 6.48C23.6296 7.056 23.5396 7.632 23.3596 8.172C23.1796 8.73 22.9096 9.234 22.5676 9.666C22.2076 10.116 21.7936 10.476 21.2896 10.746C20.7856 11.016 20.2276 11.142 19.5796 11.142C18.9496 11.142 18.3916 11.016 17.8876 10.764C17.3836 10.512 16.9516 10.152 16.5916 9.72C16.2316 9.288 15.9616 8.802 15.7816 8.226C15.5836 7.668 15.4936 7.092 15.4936 6.48Z" transform="translate(12.6299 7.12988)" fill="#3A3A3A" /> <path d="M68.219 11.142C67.553 11.142 66.995 11.016 66.545 10.764C66.095 10.512 65.735 10.17 65.465 9.738C65.195 9.306 64.997 8.82 64.889 8.28C64.781 7.74 64.727 7.164 64.727 6.57V0.0899997H62.711V6.57C62.711 7.398 62.801 8.208 62.999 8.964C63.179 9.738 63.503 10.422 63.935 11.016C64.367 11.61 64.925 12.078 65.627 12.438C66.329 12.798 67.193 12.96 68.219 12.96C69.191 12.96 70.037 12.798 70.739 12.456C71.441 12.132 72.017 11.664 72.467 11.088C72.899 10.512 73.223 9.828 73.439 9.054C73.637 8.28 73.745 7.452 73.745 6.57V0.0899997H71.711V6.57C71.711 7.146 71.639 7.722 71.531 8.262C71.423 8.802 71.225 9.288 70.955 9.72C70.685 10.152 70.325 10.494 69.893 10.746C69.443 11.016 68.885 11.142 68.219 11.142Z" transform="translate(12.6299 7.12988)" fill="#3A3A3A" /> <path d="M79.7022 3.87L86.9382 12.87H88.6122V0.107999H86.5782V9.306L79.2702 0.0899997H77.6862V12.87H79.7022V3.87Z" transform="translate(12.6299 7.12988)" This file has been truncated. show original

Was it this one you meant @jamesmarkcook. This is the one we use and works quite well [image] (Superseded) Add header menu links Site Management This tutorial has been superseded by a theme component courtesy of @Johani. play_button outdated tutorial

Thanks very much for the heads up. I’ll adapt this for my needs :thumbsup:

Just be warned, it makes upgrading a chore from time to time, as you are in charge of your header entirely and you can break it. So unless you have a staging server that you can test against for upgrades, I’d find a different route.

Ok thanks for the warning. I’ll have a think :thinking:

Feverbee also has header links that I helped them out with, they are using this code: api.decorateWidget('home-logo:after', helper => { const showExtraInfo = helper.attrs.minimized; if(!showExtraInfo) { return helper.h('ul.nav-link-container', [ helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'https://www.feverbee.com/resources', text:'RESOURCES', target:'_blank' }) ]), helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'https://experts.feverbee.com/', text:'DISCUSSIONS', target:'_self' }) ]), helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'http://sprint.feverbee.com/', text:'EVENTS', target:'_blank' }) ]), helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'http://ondemand.feverbee.com/', text:'TRAINING', target:'_blank' }) ]), helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'http://www.feverbee.com/consultancy', text:'CONSULTANCY', target:'_blank' }) ]), helper.h('li.hidden-for-mobile', [ helper.h('a.nav-link', { href:'http://www.feverbee.com/about-us', text:'ABOUT', target:'_blank' }) ]), helper.h('li', [ helper.h('a.nav-link', { href:'http://www.feverbee.com', text:'HOME', target:'_self' }) ]) ]); } }); With CSS to taste. @import "theme_variables"; // header stripe shadow .d-header { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); padding-bottom: 3px; border-bottom: 1px solid #D45000; } .badge-wrapper.box span.badge-category { padding: 0 6px 2px; } // header links .mobile-view .hidden-for-mobile { display: none; } .add-header-links { margin-left: 0 !important; } @media screen and (max-width: 940px) { .nav-link-container li:nth-child(1) { display: none; } } @media screen and (max-width: 830px) { .nav-link-container li:nth-child(2) { display: none; } } @media screen and (max-width: 743px) { .nav-link-container li:nth-child(3) { display: none; } } @media screen and (max-width: 650px) { .nav-link-container li:nth-child(4) { display: none; } } @media screen and (max-width: 525px) { .nav-link-container li:nth-child(5) { display: none; } } .nav-link-container { display: inline; li { display: inline-block; float: right; a { color: rgb(255, 255, 255); text-decoration: none; text-align: center; font-family: 'Open Sans'; line-height: 48px; min-width: 90px; font-size: 15px; padding: 0 1em; } } }

this one works well as well: [image] Adding header links post vdom upgrade Support So, post-vdom’ing of the header, this old code: {{#unless showExtraInfo}} Join us! About SiH {{/unless}} doesn’t work, so I’ve replaced it with: note: this code works fine as of, like, early May? anyway my…

in the FeverBee site the links go into a drop-down menu as the screen gets smaller. i tried these codes and couldn’t produce it. do you know how i can produce it?

I haven’t a clue to what you are referring to… can you explain what it is they are doing in a way I can reproduce it and see it? As When I shrink the window on desktop, it isn’t doing anything for me.

here is the page header in the large scale: [image] here is the header when i resize the page (you can see the 3-lines menu in the right): [image] and here is the image when you click on this three-line menu: [image] the links has gone into this menu. i hope i could explain what i meant. when i used the above codes, after i shrink the window the header becomes little bit noisy (as a result of no-space condition): [image]

[image] Pad_Pors: the links has gone into this menu. i hope i could explain what i meant. when i used the above codes, after i shrink the window the header becomes little bit noisy (as a result of no-space condition): That’s their main website and not Discourse though. The code I helped them with was for Discourse only, which doesn’t scale down to that menu either. In short, you would need minimally add more HTML. You would have to have a menu (that is hidden at larger viewports) plus the horizontal menu which is visible at larger viewports. Then as the viewport shrinks your CSS media queries should hide the horizontal menu and make the menu visible. This is a good read of the concept behind what their main site is doing [image] Responsive Menu Concepts | CSS-Tricks Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.

Adding links to Discourse header

Product Support

mikechristopher July 26, 2016, 6:38pm 3

Was it this one you meant @jamesmarkcook. This is the one we use and works quite well

Topic		Replies	Views
Why isn't there an obvious link from meta.discourse.org to discourse.org in the header? Site feedback	20	3089	November 2, 2017
Link on Top header to Go to Home page of main site Product Support	1	1402	February 25, 2020
Adding header links post vdom upgrade Product Support	25	6423	October 16, 2017
Why is the large middle blankspace in the header not configurable? Product Support	2	2096	January 21, 2019
Need plugin code for customised dicourse header Product Support	8	1731	May 10, 2019

Adding links to Discourse header

Related topics