كيفية إضافة شريط القائمة العلوي مثل 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.