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
https://github.com/sitepoint/discourse-theme/blob/master/assets/javascripts/discourse/templates/header.hbs
Was it this one you meant @jamesmarkcook. This is the one we use and works quite well
Thanks very much for the heads up. I’ll adapt this for my needs 
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 
Feverbee also has header links that I helped them out with, they are using this code:
<script type="text/discourse-plugin" version="0.2">
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'
})
])
]);
}
});
</script>
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:
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:
here is the header when i resize the page (you can see the 3-lines menu in the right):
and here is the image when you click on this three-line menu:
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
many thanks for the good link 
Have you noticed issues with older versions of Safari not displaying the link text?
If so, are you aware of any workarounds?
I unfortunately do not have any old versions of safari laying around. So I can’t say that I have. Though I can’t think of any reason for that to occur, The HTML it outputs isn’t anything special and utilizes CSS 1 standard properties.
However, if you used that code as written, pay close attention to the “hidden-for-mobile” class, maybe it is being treated as mobile?
Thanks for the reply.
The links are definitely being inserted, but the text attribute is being ignored, or not inserted for some reason.
I’m don’t really have much knowledge around Ember and wasn’t sure if this was an Ember issue or a Discourse issue.
If you have a way to recreate it, can you debug it? I’m thinking this is the location
https://github.com/discourse/discourse/blob/be3a5a56ccc284b352aa65080fc6b955f73cc72a/vendor/assets/javascripts/virtual-dom.js#L874-L889
text would be the propname you want to stop the debugger on. I wonder if trying to set it via element['text'] = value is not happy with the older version of safari.
This topic was automatically closed after 2873 days. New replies are no longer allowed.
