Is there any better way to add Menu to header in Discourse.org forum?

html
css
discourse

(App Shah) #1

Currently I’ve this Menu in Crunchify Forum header.

In order to achieve that, I’ve added below code to

##Header Code

About Java Blogging

##CSS Code

/* =============== Crunchify Header Menu CSS ================= */
span#crunchify-top-links {
    display: block !important;
    margin: 24px 0 0 0;
}
.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) {
    div#crunchify-navbar {
        max-width: none;
        width: auto;
        z-index: 1040;
        position: fixed;
        top: 0;
        left: 58%;
    }
}
@media (max-width: 998px) {
    div.title-wrapper {
        padding-right: 220px;
    }
    span#crunchify-top-links {
        position: fixed;
        top: 0;
        margin: 22px 0px 0px -385px;
    }
    div#crunchify-navbar {
        max-width: none;
        width: auto;
        z-index: 1040;
        float: right;
        position: relative;
    }
}
@media (max-width: 900px) {
    div.title-wrapper {
        padding-right: 220px;
    }
}
@media (max-width: 725px) {
    a.crunchify-menu#library {
        display: none;
    }
    div.title-wrapper {
        padding-right: 135px;
    }
    span#crunchify-top-links {
        margin-left: -290px;
    }
}
@media (min-width: 571px) {
    i.fa.fa-home:before {
        display: none;
    }
}
@media (max-width: 570px) {
    a.crunchify-menu#store {
        display: none;
    }
    span#crunchify-top-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;
    }
}
a.crunchify-menu {
    font-size: 14px;
    padding: 0px 12px 0px 0px;
    color: white;
}

.nav-link-container {
  display: inline;
}
.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: 'Open Sans'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}

.d-header .icons .icon {
     float: right;
    color: #EC7825;
}

.add-header-links {
    float: left;
    padding-left: 0;
}

How could I add header menu like https://experts.feverbee.com/ forum. It’s too good. Any help would be great.


(App Shah) #2

I’ve just updated Header menu on here on Crunchify Forum.

Kindly visit this tutorial for your reference: http://crunchify.com/how-to-add-auto-hide-custom-navigation-header-menu-items-on-discourse-org-forum/


Copyright © 2018 Crunchify, LLC.  •  WordPress Services  •  Contact  •  Hosted at DiscourseHosting.