This tutorial has been superseded by a theme component courtesy of @Johani.
outdated tutorial
If you just want the CSS and header info, skip to the end of this post. Any DOW references are specific to my site, http://driveonwood.com - just substitute your own.
To see this code live, visit http://forum.driveonwood.com. Try resizing the window, open it in Firebug etc.
Disclaimer, I’m not a CSS pro, just a tinkerer. There’s likely code presented here that is sub-optimal, extraneous, or incomplete. I have not tested this code apart from my main body of CSS customizations. No lifeguard on duty, swim at your own risk.
1. Add links above the header
This is pretty simple, and follows Coding Horror’s tutorial. You need a couple of classes and id tags to help with the CSS later. Go to Admin > Customize > CSS/HTML, and make a new sheet. Click on the Header tab, and add the code (see bottom). Customize to whatever you want, links can be internal or to a “mothership” site, or anywhere you like. Keep the names as short as possible and only put absolute essentials in there. I wound up with three links; Home, Store, and Library.
2. Move the links onto the Discourse header
Time for some CSS positioning. On the same sheet as the header code, click the CSS tab, and start adding code.
You need to move the links down and left; I used negative margins to the right, to avoid the stock Discourse controls, and top margin to bring it down onto the stock header. You need to specify a z-index or it will slip under the stock header - not too high or you’ll cover the stock controls with your padding. Use Fixed position to keep it in place while you scroll. Tweak these margins to fit your specific use.
/*Adding DOW links to top - link text section*/
span#top-navbar-links {
position: fixed;
top: 0;
margin:22px 0px 0px -385px;
}
div#top-navbar {
max-width:none; /*remove max width*/
width: auto; /*prevent other widths taking over*/
z-index: 1040; /*stays on top of other header*/
float:right;
position:relative;
}
3. Style the header links
This part is up to you, I just made it white to match the white Discourse controls (see /admin/customize/colors - I set header primary to white) and changed the text size and spacing a bit to match my other site.
/*Individual links*/
a.dow-menu {
font-size: 14px;
padding:0 13px;
color:white;
}
4. Making it responsive
Right now it looks great at full width, but as soon as you narrow the browser things start to overlap and get ugly. A couple of media queries will solve that.
This is by far the sketchiest part of my CSS, and could probably use some work.
Set a max-width for every point that there’s just barely room for the next menu item. When it breaks over, you’ll have to readjust the spacing. In addition to that, Discourse has it’s own media query points at which it resizes the menu bar width. Some of the code deals with that. I recommend you copy the code below and read it carefully, apply it one piece at a time and try to understand what it does.
While the window is small enough, you can simply measure from the right side of the screen and do a big padding section to space it out. Over a certain width, Discourse starts to center the screen and you have to use percentage based spacing. This gets over my head, and hopefully a smarter person will suggest a better way. What I have works good enough for me, for now.
Another concern is the title of the post. Long titles will overlap on your new menu items; you need to set a max-width on the title to keep that from happening.
5. The home button
Later on, I decided to add a home icon instead of the whole word. This works better on mobile and saves some space, plus it fits in with the other font-awesome icons - comes out of the same library which the user has loaded with the page. The home icon is loaded before the Home link, and is normally hidden with display:none. On media queries under a certain width, I hide all the nav links and make the home icon visible again.
@media (max-width: 570px) {
a.dow-menu#store {
display:none;
}
span#top-navbar-links {
margin:19px 0 0 -220px;
}
i.fa.fa-home:before {
display:initial !important;
color:#FFF;
font-size:30px;
}
Full CSS Code:
/*Adding DOW links to top - link text section*/
span#top-navbar-links {
display:block !important;
margin:22px 0 0 0;
}
/*Start dropping DOW Menu links & shortening title on small windows*/
.extra-info-wrapper .topic-link {
max-width:600px;
}
@media (min-width: 1150px) {
.extra-info-wrapper .topic-link {
max-width:600px;
padding-right:250px;
}
}
@media (max-width: 1149px) {
div.title-wrapper {
padding-right:280px;
}
}
@media (min-width: 999px) {
/*Adding DOW links to top - link container */
div#top-navbar {
max-width:none; /*remove max width*/
width: auto; /*prevent other widths taking over*/
z-index: 1040; /*stays on top of other header*/
/*position:relative;
float:left;*/
position:fixed;
top:0;
left: 58%;
}
}
@media (max-width: 998px) { /*jumpover point, attach to right side*/
div.title-wrapper {
padding-right:220px;
}
/*Adding DOW links to top - link text section*/
span#top-navbar-links {
position: fixed;
top: 0;
margin:22px 0px 0px -385px;
}
div#top-navbar {
max-width:none; /*remove max width*/
width: auto; /*prevent other widths taking over*/
z-index: 1040; /*stays on top of other header*/
float:right;
position:relative;
}
}
@media (max-width: 900px) { /*jumpover point*/
/*div#top-navbar {
left: 50%;
}*/
div.title-wrapper {
padding-right:220px;
}
}
@media (max-width: 725px) {
a.dow-menu#library {
display:none;
}
div.title-wrapper {
padding-right:135px;
}
span#top-navbar-links {
margin-left:-290px;
}
}
@media (min-width: 571px) {
i.fa.fa-home:before {
display:none;
}
}
@media (max-width: 570px) {
a.dow-menu#store {
display:none;
}
span#top-navbar-links {
margin:19px 0 0 -220px;
}
i.fa.fa-home:before {
display:initial !important;
color:#FFF;
font-size:30px;
}
span#home-text {
display:none;
}
div.title-wrapper {
padding-right: 50px;
}
.extra-info-wrapper {
display: block;
}
}
@media (max-width:455px) {
.extra-info-wrapper {
display: none;
}
}
/*Individual links*/
a.dow-menu {
font-size: 14px;
padding:0 13px;
color:grey;
}
Full Header code:
<div id="top-navbar" class="container">
<span id="top-navbar-links" display="none">
<a href="http://www.driveonwood.com/" class="dow-menu" id="home"><span id="home-text">Home</span>
<i class="fa fa-home" aria-hidden="true"></i></a>
<a href="http://www.driveonwood.com/store/" class="dow-menu" id="store">Store</a>
<a href="http://www.driveonwood.com/library/" class="dow-menu" id="library">Library</a>
</span>
</div>