كيفية إضافة شريط القائمة العلوي مثل try.discourse.org

الدعم
1

هل يستخدم try.discourse.org مكون رأس العلامة التجارية أم شريط القوائم العلوي المخصص؟

كيف يمكن إضافة شريط قوائم علوي مثل ما هو موضح أدناه، حيث تظهر خيارات مثل “حول” و"الميزات" و"المجتمع" و"التجربة" و"الأسعار" على الجهة اليسرى؟ كيف يمكن فعل ذلك؟

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

أيضًا، كيف يمكن تغيير لون الشريط من الأزرق إلى الأصفر كما هو موضح؟

شكرًا!

2

يُستخدم try كودًا مخصصًا، ولكن يمكن تحقيق نفس النتيجة باستخدام مكون رأس العلامة التجارية مع إضافة بعض تنسيقات CSS.

3

@itsbhanusharma شكرًا لك. هل يمكنك مساعدتي في تخصيص CSS؟

4

كيف يمكنني المساعدة؟
يمكنك تجربتها، وإذا علقت في أي مكان، فسأكون سعيدًا بمساعدتك.

أو

إذا كنت ترغب في أن أقوم بتنفيذها لك، فأنا متاح للتوظيف. قم بنشر إعلان في #سوق العمل مع تحديد ميزانية معقولة، وسأكون سعيدًا بتولي المهمة.

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

نعم، يبدو أن الكود من try وهو نقطة انطلاق جيدة.

7

@itsbhanusharma شكراً لك. نعم، هذا كود من موقع try. سأقوم بتخصيصه وفقاً لمتطلباتي الآن.