So fügen Sie eine obere Menüleiste wie bei try.discourse.org hinzu

Unterstützung
1

Nutzt try.discourse.org die Brand Header Theme-Komponente oder die benutzerdefinierte Top-Menüleiste?

Wie füge ich eine Top-Menüleiste wie unten hinzu, bei der Optionen wie „Über uns“, „Funktionen“, „Community“, „Demo“ und „Preise“ auf der linken Seite angezeigt werden? Wie geht das?

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

Außerdem: Wie ändere ich die Farbe der Leiste, z. B. von Blau zu Gelb?

Vielen Dank!

2

try verwendet einen benutzerdefinierten Code, aber dasselbe lässt sich auch mit der Brand-Header-Komponente und etwas zusätzlichem CSS erreichen.

3

@itsbhanusharma Danke. Könntest du mir bitte bei benutzerdefiniertem CSS helfen?

4

Wie kann ich helfen?
Du kannst es einfach ausprobieren und falls du irgendwo hängen bleibst, helfe ich dir gerne weiter.

Oder

Wenn du möchtest, dass ich es für dich nachbaue, bin ich für Aufträge verfügbar. Erstelle einen Beitrag in Marketplace mit einem angemessenen Budget, und ich nehme das gerne an.

5

@itsbhanusharma Nochmals vielen Dank! Ich habe festgestellt, dass untenstehender Code erforderlich ist. Könnten Sie bitte prüfen, ob das in Ordnung ist? Ich hoffe, es funktioniert für Desktop, Tablets und Mobilgeräte.

Im benutzerdefinierten CSS des Themas platziert.

Allgemeiner CSS-Bereich

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

Allgemeiner Header-Bereich

<nav id="bar">
  <div id="logo">
    <a href="https://www.discourse.org">
       <img src="logo.png" alt="mein Logo"> 
    </a>
  </div>
  <ul>
    <li><a href="https://www.discourse.org/features">Funktionen</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">Preise</a></li>
  </ul>
</nav>
6

Ja, der Code aus dem try-Block scheint zu funktionieren und ist ein guter Ausgangspunkt.

7

@itsbhanusharma Danke. Ja, das ist Code von try. Ich werde ihn jetzt an meine Anforderungen anpassen.