How to add top menu bar like try.discourse.org

Support
1

is try.discourse.org using brand header theme component or customer top menu bar?

How to add top menu bar like below. where I see options like About, Features Community Demo Pricing on left side. How to do that?

04%20PM
Screen Shot 2019-10-16 at 9.04.04 PM.png2806×276 27.7 KB

Also how to change bar color like this…from blue to yellow.

Thanks!

3 Likes
2

try is using a custom code but the same can be achieved using brand header component with some added css.

5 Likes
3

@itsbhanusharma thank you. it is possible for you to help me for custom css.

1 Like
4

How can I help?
You can try it and if you get stuck somewhere, I’ll be happy to help you.

Or

If you want me to replicate it for you, I’m available for hire, make a post in marketplace with a reasonable budget and I’ll be happy to take that on.

5 Likes
5

@itsbhanusharma Thank you again! I discovered below code is required, could you please check if it is Ok. Hope it works for desktop, tablets and mobile.

Placed in custom css of theme.

common css section

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

common header section

<nav id="bar">
  <div id="logo">
    <a href="https://www.discourse.org">
       <img src="logo.png" alt="my logo"> 
    </a>
  </div>
  <ul>
    <li><a href="https://www.discourse.org/features">Features</a></li>
    <li><a href="http://meta.discourse.org">Community</a></li>
    <li><a href="http://try.discourse.org">Demo</a></li>
    <li><a href="https://payments.discourse.org/pricing">Pricing</a></li>
  </ul>
</nav>
2 Likes
6

Yes, it seems like the code from try and it is a good starting point.

1 Like
7

@itsbhanusharma thank you. Yes it is code from try. I will customize according to my requirement now.