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

Unterstützung
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 „Gefällt mir“
2

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

5 „Gefällt mir“
3

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

1 „Gefällt mir“
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 „Gefällt mir“
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>
2 „Gefällt mir“
6

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

1 „Gefällt mir“
7

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