try.discourse.org처럼 상단 메뉴바를 추가하는 방법

제품 지원
1

try.discourse.org는 브랜드 헤더 테마 컴포넌트를 사용 중인가요, 아니면 고객용 상단 메뉴 바를 사용 중인가요?

아래와 같은 상단 메뉴 바를 추가하는 방법은 무엇인가요? 왼쪽에 About, Features, Community, Demo, Pricing 같은 옵션이 보이도록 하려면 어떻게 해야 하나요?

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

또한 바의 색상을 이렇게 푸른색에서 노란색으로 변경하는 방법도 알려주세요.

감사합니다!

2

try는 커스텀 코드를 사용하지만, 일부 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에서 가져온 코드입니다. 이제 제 요구사항에 맞게 수정하겠습니다.