Como adicionar uma barra de menu superior como try.discourse.org

Suporte
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 curtidas
2

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

5 curtidas
3

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

1 curtida
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 curtidas
5

@itsbhanusharma Obrigado novamente! Descobri que o código abaixo é necessário; você poderia verificar se está correto? Espero que funcione para desktop, tablets e dispositivos móveis.

Colocado na seção de CSS personalizado do tema.

Seção CSS comum

@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;
}

Seção de cabeçalho comum

<nav id="bar">
  <div id="logo">
    <a href="https://www.discourse.org">
       <img src="logo.png" alt="meu logotipo"> 
    </a>
  </div>
  <ul>
    <li><a href="https://www.discourse.org/features">Recursos</a></li>
    <li><a href="http://meta.discourse.org">Comunidade</a></li>
    <li><a href="http://try.discourse.org">Demonstração</a></li>
    <li><a href="https://discourse.org/pricing">Preços</a></li>
  </ul>
</nav>
2 curtidas
6

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

1 curtida
7

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