Как добавить верхнее меню, как на try.discourse.org

Поддержка
1

Использует ли try.discourse.org компонент темы с брендовым заголовком или верхнее меню пользователя?

Как добавить верхнюю панель меню, как на изображении ниже, где такие опции, как «О нас», «Возможности», «Демонстрация сообщества», «Цены», находятся слева? Как это сделать?

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

Также как изменить цвет панели, как на изображении… с синего на желтый.

Спасибо!

2

Попробуйте использовать пользовательский код, но тот же результат можно достичь с помощью компонента заголовка бренда, добавив немного CSS.

3

@itsbhanusharma спасибо. Вы можете помочь мне с пользовательским CSS?

4

Чем я могу помочь?
Вы можете попробовать сами, и если где-то застрянете, я с радостью помогу.

Или

Если вы хотите, чтобы я сделал это за вас, я доступен для найма: создайте пост в Marketplace с разумным бюджетом, и я с радостью возьмусь за эту задачу.

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. Я сейчас адаптирую его под свои нужды.