How to Add and Auto Hide Custom Navigation Header Menu items on Discourse.org Forum

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 your preferred 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.

/* =============== 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.

<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 🙂

<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.