
Have a question on how to add menu to discourse forum / add menu items to main discourse header area?
Recently I’ve added custom Navigation Headers to Crunchify Forum
. Discourse.org forum is so far working perfectly fine. We have hosted forum on Linode hosting.
I wanted to have at least few links to my original blog on Crunchify Forum and decided to look around. I search around a lot and only solution I like which was on FeverBee forum. So I started implementing the similar menu and would like to share detailed steps with my readers.
- How to add header menu links
- Custom nav header like discourse.org
- Best way to customize the header for Discourse meta?
- How to add external link on top menu?
- Insert custom menu items within main nav
- Add Navigation header that takes you back to the parent site
This tutorial will help you if you have any of above questions too.
Let’s get started:
Step-1
- Go to your Forum’s admin page
- Click on
Customize
button - Click on
CSS/HTML
button - Click on
New
and add yourpreferred Name

Step-2
Click on CSS tab
and add below to CSS section
.
This CSS will make sure to display menu header only on Desktop with min-width of 1024px
. We are using @media
CSS properties.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* =============== Crunchify Header Menu CSS ================= */ // Hide header menu on mobile devices @media screen and (max-width: 1024px) { .crunchify-container { display: none !important; } } // Show header menu only on desktop with size > 1024px @media screen and (min-width: 1024px) { span#crunchify-top-links { display: block !important; margin: 10px 0 0 0; } div#crunchify-navbar { max-width: none; width: auto; z-index: 1040; position: fixed; top: 0; left: 38%; } .nav-link-container li { display: inline-block; float: left; } .nav-link-container a { color: rgb(255, 255, 255); text-decoration: none; text-align: center; line-height: 48px; font-size: 14px; padding: 0 1em; } .d-header .icons .icon { float: right; color: #EC7825; } .nav-link-container { display: inline } } |
Step-3
Click on Header section
and add below code. Modify the links as per your need in below code block.
1 2 3 4 5 6 7 8 9 10 |
<div id="crunchify-navbar" class="crunchify-container"> <span id="crunchify-top-links"> <ul class="nav-link-container"> <li><a href="https://crunchify.com" target="_blank" class="nav-link">BLOG</a></li> <li><a href="https://crunchify.com/category/java-tutorials/" target="_blank" class="nav-link">JAVA CODE</a></li> <li><a href="https://crunchify.com/category/spring-mvc/" target="_blank" class="nav-link">SPRING MVC</a></li> <li><a href="https://pro.crunchify.com/" target="_blank" class="nav-link">SERVICES</a></li> <li><a href="https://crunchify.com/contact/" target="_blank" class="nav-link">CONTACT</a></li> </ul></span> </div> |
Step-4
Go to </Head> Section
and add below code. This javascript will make sure that when your screen scrolled down to 120px
it will hide Header Menu 🙂
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(window).scroll(function() { if ($(this).scrollTop() > 120) { $('.crunchify-container').fadeOut(); } else { $('.crunchify-container').fadeIn(); } }); </script> |
Step-5
Click Save button
and click checkbox for Enabled
option.

Just refresh your forum and you should see nice Navigation Header on your Forum.
Live Demo
Check it out Crunchify Forum: https://ask.crunchify.com.