How to add header menu links


(Chris Saenz) #1

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>

Custom header with dropdown navigation
How to add a "home" button or something similar
Header Menu behavior
Moving extra nav items in main navbar
Media queries for header links
Adding links to Discourse header
Wordpress: how to display discourse after the WP header on a WP-page?
Add button to top menu
[PAID] Looking for a custom design on my Discourse Forum
Add new link on header beside search icon
Adding link to blog on main page
Banner in the top of the lists with sign up form
How would I get started with emulating a website's custom CSS
Custom menu on header
How can we Customizing Header?
Static page links in nav bar?
NoMethodError: undefined method `auth_token=' for #<User:0x0055cd7bbc1828>
Why is the large middle blankspace in the header not configurable?
(Chris Saenz) #2

I’m not sure I included everything in that code above. In case somebody tries it and there’s pieces missing, you may find the whole kit and caboodle to be useful. This is everything I’ve done to Discourse via CSS/HTML to date. Note that I started with Sam’s Minimal theme, which I keep on a separate sheet; I also have a floating action button for mobile that’s on a separate sheet. Below is just my own customization sheet.

###CSS

/*==================CMS custom===================*/

.topic-list a.title:not(.badge-notification) {
    font-family:"Open Sans";
}
    
.topic-list .badge-wrapper .badge-category {
  padding: 0 10px 0 5px;
}

/*Reset washed out colors */
.badge-category-bg {
    opacity: 1;
}

/*Reset washed out colors */
#topic-progress .bg {
    background-color: #86ea86;
}

/*Youtube full width (from chapel/WYL)*/
.lazyYT {
    height: 0 !important;
    width: 100% !important;
    max-width: 674px;
    padding-bottom: 56.25% !important;
}




/*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;
    }
}

/* Make green bar similar to Mezz*/
#topic-title {  /*can do .list-controls as well*/
  background-color: #2ecc71;
  padding-top: 20px; /*get rid of whitespace*/
  margin-top: -30px;
}

/*Individual links*/
a.dow-menu {
    font-size: 14px;
    padding:0 13px;
    color:white;
}

/*header shadow*/
.d-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}

html {
    font-family: "Open Sans", sans-serif;
    font-weight:normal;
}

#topic-title h1 a {
    font-size: 33px;
    font-weight:300;
    color:white;
    padding-left:5px;
    line-height: 1.25em;
}

/*Space between Youtube vids and pictures*/

.lazyYT-container, .lightbox-wrapper, p img {
    margin:10px 0;
}

.extra-info.two-rows h1 {
line-height: 1.25em;
font-weight:normal;
}

/*Copying bottom, footer and some CSS from Mezzanine*/

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
section#bottom .container {
  max-width: 750px;
 }
}

@media (min-width: 992px) {
section#bottom .container {
  max-width: 970px;
 }
}

@media (min-width: 1200px) {
section#bottom .container {
  max-width: 1170px;
 }
}
section#bottom {
    padding-bottom:20px;
    color:#bdc3c7;
}

#bottom h4 {
  margin-top: 38px;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 18px;
  color:#FFF;
}

.wet-asphalt {
    background-color:#34495e;
}

.wet-asphalt a:not(.btn) {
  color: #bdc3c7;
}

.midnight-blue {
    background-color: #2c3e50;
}

#footer {
    padding: 30px 0 40px 0;
    color: #bdc3c7;
}

#footer a {
  color: #bdc3c7;
}


@media (min-width: 768px) {
.col-sm-6 {
  width: 50%;
  float:left;
  padding:0 15px;
 }
}

@media (min-width: 992px) {
.col-md-3 {
  width: 25%;
 }
}

address {
    font-style:normal;
}

.d-header button.sign-up-button {
  display: none;
}

#user-card .card-content {
  background: rgba(34,34,34,0.70);
}

.d-header .valign-helper {
    display: block;
}

#topic-progress {
    background-color: #EEE;
    //border: 1px solid #e2e2e2;
    color: #444;
    font-weight: normal;
    
    .bg {
       background-color: #81FC97;
    }
}

/*Prevent long username breaking topic list*/
.poster-info {
  max-width: 80px;
}

/*enlarge and center user icon top right */
a#current-user {
  margin-top: -3px;
}
li.current-user.dropdown img.avatar {
    width:40px !important;
    height:40px !important;
}

img.avatar {
  border-radius: 50%;
}

###CSS Mobile

html {
    font-family: "Open Sans", sans-serif;
    font-weight:normal;
}

/*Space between Youtube vids and pictures*/

.lazyYT-container, .lightbox-wrapper, p img {
    margin:10px 0;
}


/*Adding DOW links to top - link text section*/
span#top-navbar-links {
   position: fixed;
  top: 0;
  margin:15px 0px 0px -195px;
  
}

.fa-home:before {
  color:#FFF;
  font-size:30px;
}

/*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*/
    float:right;
    position:relative;
}

/*Copying bottom, footer and some CSS from Mezzanine*/

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
section#bottom .container {
  max-width: 750px;
 }
}

@media (min-width: 992px) {
section#bottom .container {
  max-width: 970px;
 }
}

@media (min-width: 1200px) {
section#bottom .container {
  max-width: 1170px;
 }
}
section#bottom {
     padding-bottom:20px;
    color:#bdc3c7;
}

#bottom h4 {
  margin-top: 38px;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 18px;
  color:#FFF;
}

.wet-asphalt {
    background-color:#34495e;
}

.wet-asphalt a:not(.btn) {
  color: #bdc3c7;
}

.midnight-blue {
    background-color: #2c3e50;
}

#footer {
    padding: 30px 0 40px 0;
    color: #bdc3c7;
}

#footer a {
  color: #bdc3c7;
}


@media (min-width: 768px) {
.col-sm-6 {
  width: 50%;
  float:left;
  padding:0 15px;
 }
}

@media (min-width: 992px) {
.col-md-3 {
  width: 25%;
 }
}

address {
    font-style:normal;
}

#topic-progress {
    background-color: #EEE;
    //border: 1px solid #e2e2e2;
    color: #444;
    font-weight: normal;
    
    .bg {
       background-color: #81FC97;
    }
}

//Hide sort categories mobile

@media (max-width: 610px) {
    #ember1654, #ember1754{  //hide categories
    display:none;
}
}
@media (max-width: 502px) {
    #ember1653{  //hide top
    display:none;
}
}
@media (max-width: 444px) {
    #ember1651{  //hide new
    display:none;
}
}
@media (max-width: 385px) {
#ember1625 { //hide all categories
    display:none;
}
}

###Header

<div id="top-navbar" class="container">
<span id="top-navbar-links" style="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>

###Header Mobile

<div id="top-navbar" class="container">
<span id="top-navbar-links">
  <a href="http://www.driveonwood.com/" class="dow-menu">  
  <i class="fa fa-home" aria-hidden="true"></i></a>
</span>
</div>

Help with header CSS needed (please)
(Mittineague) #3

Thanks ky_metro :thumbsup:

For those interested, a similar approach can be used for Top and Footer


(Mittineague) #4

I just did a bit more testing.

Although it looks more like a “footer”, with javascript disabled, the Header is the only one of the three still there.

This means no-js users (and search bots) will still see what is there.


(Austin) #5

I entered your code into my CSS and Header, customized a couple links, hit enabled? and save. But nothing is reflected and it looks the same as before in preview and live modes. What am I doing wrong?

Edit: Actually, it did change, a little. I couldn’t see navbar links because they were white on white background.

Also, I love the layout of your forum. Less columns, clean, etc. How did you do that?


(Chris Saenz) #6

Yep, my site has a dark colored header. I did mention this above:




I’m using Sam’s Minimal theme:


As noted, I use separate stylesheets for his and mine, so that I can apply updates from Sam without disturbing my code.

If you’re using multiple sheets, be aware that they are sorted alphabetically and applied in order. So if you want to override something be careful with the naming. I just add a number before the name, like this:


(Chris Saenz) #7

I should also point out that the above CSS and header code is from June 2nd and uneditable by me… there are minor updates needed given Discourse’s menu restructure (the notifications glyph is gone). If you’re using Babble chat, the spacing is very close but might need tweaking.


Add menu items to main header area
(Marco) #8

I insert the Full Header code, but:

How can I fix?


(Chris Saenz) #9

Looks like you need to increase the right padding some. You have four links where I only had three. That will affect the spacing.

I also removed the “sign up” button to save space, as Log In will present the same choices.


(Marco) #10

How can I disable the button?
I wish I could do a fix and hold the link.


(Chris Saenz) #11

Just hide it via CSS:

.d-header button.sign-up-button {
     display: none;
}

(Marco) #12

Thank you…
But the text still goes to overlap with the button…


(Chris Saenz) #13

Did you do this yet?


(Marco) #14

Yes, I tried to change that parameter, but nothing has changed…


(Chris Saenz) #15

[quote=“ky_metro, post:1, topic:29563”]
Tweak these margins to fit your specific use.[/quote]

 /*Adding DOW links to top - link text section*/
span#top-navbar-links {
  position: fixed;
  top: 0;
  margin:22px 0px 0px -385px;
  }

Decrease the -385px as needed.


(Marco) #16

Nothing ç_ç
I have tried changing the parameter several times and empty the cache of browsers…


(Sam) #17

Just wanted to mention - depending on your needs you might find it easier to add header items using the header-after-home-logo and before-notifications* plugin outlets to add items to the header, as discussed here: Adding plugin-outlets using a theme

*I forget what exactly this one is called, not using it currently myself.

It looks like this guide is covering some other options which may work better, just wanted to make sure the plugin-outlet option is noted. :slight_smile:


(ljpp) #18

@ky_metro - nice work on your forum!

Do you mind sharing the version of @sam’s Minimal that you are using on Drive On Wood!, as he has later removed the avatars and categories altogether it seems, and that is too spartan for my taste.


(Sam Saffron) #19

I did not remove avatars or categories … :slight_smile:


(ljpp) #20

Hi @sam, I have misunderstood your bullet list here, then.

Anyway, I copied Minimal and D.O.W. modifications and applied them, and no avatar image was shown on the index page. Only the username in the last column on the right. I very much like the design of D.O.W. and trying to reach a quite similar outcome on my new site http://Tappara.co.

BTW, this will be one of the busiest and biggest Discourse based forums up to date (check out our SMF stats). The problem is that I am totally incompetent in CSS, but would like to achieve a visually pleasing and professional UX. We have been running on SMF default templates for 10 years, so I would like to see that to change on Discourse.

But this is a no-money / non-profit project. If there is anyone interested in contributing to polishing the design just for the fame or minimal compensation, please contact me. We need help.