Thanks.
I’m about to run out the door so I’m doing this in a rush – I’ll check back in the morning in case you have questions.
Put this in the </head>
section and customise to suit:
<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/register',
text:'REGISTER',
target:'_blank'
})
]),
helper.h('li.hidden-for-mobile', [
helper.h('a.nav-link', {
href:'https://www.feverbee.com/resources',
text:'RESOURCES',
target:'_self'
})
]),
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>
Then put this in your custom CSS:
*caveat: I haven’t revisited these media queries for many upgrades so some may no longer be necessary and it’s almost def not best practice!
/*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: 2px solid #f3a633;
}
.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 {
display: none;
}
}
@media screen and (max-width: 830px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 743px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 667px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 650px) {
.nav-link-container {
display: none;
}
}
@media screen and (max-width: 525px) {
.nav-link-container {
display: none;
}
}
.nav-link-container {
display: inline;
position: absolute;
right: 140px;
}
.nav-link-container li {
display: inline-block;
float:right;
}
.nav-link-container a {
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
font-family: 'Montserrat';
line-height: 48px;
min-width: 90px;
font-size: 15px;
padding: 0 1em;
}