Come aggiungere una barra del menu superiore come try.discourse.org

Supporto
1

Sta usando brand header theme component o la barra del menu superiore personalizzata?

Come posso aggiungere una barra del menu superiore come quella qui sotto, dove vedo opzioni come Chi siamo, Caratteristiche, Community, Demo, Prezzi sul lato sinistro? Come si fa?

04%20PM
04%20PM2806×276 27.7 KB

Inoltre, come posso cambiare il colore della barra, ad esempio da blu a giallo?

Grazie!

2

L’uso di un codice personalizzato è possibile, ma lo stesso risultato può essere ottenuto utilizzando il componente brand header con l’aggiunta di alcuni stili CSS.

3

@itsbhanusharma grazie. Potresti aiutarmi con il CSS personalizzato?

4

Come posso aiutarti?
Puoi provarci e, se ti blocchi da qualche parte, sarò felice di aiutarti.

Oppure

Se desideri che lo replichi per te, sono disponibile per lavoro: pubblica un annuncio in Marketplace con un budget ragionevole e sarò felice di occuparmene.

5

@itsbhanusharma Grazie ancora! Ho scoperto che è necessario il codice sottostante, potresti controllare se va bene? Spero che funzioni per desktop, tablet e mobile.

Inserito nel CSS personalizzato del tema.

Sezione CSS comune

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

Sezione header comune

<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">Funzionalità</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://discourse.org/pricing">Prezzi</a></li>
  </ul>
</nav>
6

Sì, sembra che il codice da try sia un buon punto di partenza.

7

@itsbhanusharma grazie. Sì, è il codice da try. Ora lo personalizzerò in base alle mie esigenze.