如何添加类似 try.discourse.org 的顶部菜单栏

支持
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!

2

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

3

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

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

@itsbhanusharma 再次感谢！我发现需要以下代码，请您检查一下是否可行。希望它能同时适用于桌面端、平板和移动设备。

已放置在主题的自定义 CSS 中。

通用 CSS 部分

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

通用头部部分

<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">功能</a></li>
    <li><a href="http://meta.discourse.org">社区</a></li>
    <li><a href="http://try.discourse.org">演示</a></li>
    <li><a href="https://discourse.org/pricing">定价</a></li>
  </ul>
</nav>
6

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

7

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