# try.discourse.org처럼 상단 메뉴바를 추가하는 방법
**URL:** https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210
**Category:** Support
**Created:** [10월 17, 2019, 4:05오전 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210 "2019-10-17T04:05:45Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@sat](https://meta.discourse.org/u/sat)
#### Post date: [10월 17, 2019, 4:05오전 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/1 "2019-10-17T04:05:45Z")
try.discourse.org는 [브랜드 헤더 테마 컴포넌트](https://meta.discourse.org/t/brand-header-theme-component/77977)를 사용 중인가요, 아니면 고객용 상단 메뉴 바를 사용 중인가요?
아래와 같은 상단 메뉴 바를 추가하는 방법은 무엇인가요? **왼쪽** 에 About, Features, Community, Demo, Pricing 같은 옵션이 보이도록 하려면 어떻게 해야 하나요?
또한 바의 색상을 이렇게 푸른색에서 노란색으로 변경하는 방법도 알려주세요.
감사합니다!
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [10월 17, 2019, 9:35오전 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/2 "2019-10-17T09:35:38Z")
try는 커스텀 코드를 사용하지만, 일부 CSS를 추가하여 브랜드 헤더 컴포넌트로 동일한 결과를 얻을 수 있습니다.
---
### Author:  [@sat](https://meta.discourse.org/u/sat)
#### Post date: [10월 17, 2019, 8:09오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/3 "2019-10-17T20:09:42Z")
@itsbhanusharma 감사합니다. 커스텀 CSS에 대해 도와주실 수 있을까요?
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [10월 17, 2019, 8:24오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/4 "2019-10-17T20:24:38Z")
어떻게 도와드릴까요?
직접 시도해 보고 막히는 부분이 있으면 기꺼이 도와드리겠습니다.
또는
제가 대신 재현해 드릴 수 있습니다. 저는 프리랜서로 활동하고 있으니, #Marketplace 채널에 합리적인 예산을 제시해 주시면 기꺼이 맡아 드리겠습니다.
---
### Author:  [@sat](https://meta.discourse.org/u/sat)
#### Post date: [10월 18, 2019, 3:57오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/5 "2019-10-18T15:57:44Z")
@itsbhanusharma 다시 한번 감사합니다! 아래 코드가 필요하다는 것을 알게 되었으니, 괜찮은지 확인해 주시겠습니까? 데스크톱, 태블릿, 모바일 모두에서 작동하기를 바랍니다.
테마의 사용자 정의 CSS에 배치했습니다.
**공통 CSS 섹션**
```plaintext
@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;
}
```
**공통 헤더 섹션**
```plaintext
```
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [10월 18, 2019, 6:33오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/6 "2019-10-18T18:33:53Z")
네, try의 코드인 것 같고 좋은 출발점이 될 수 있습니다.
---
### Author:  [@sat](https://meta.discourse.org/u/sat)
#### Post date: [10월 18, 2019, 6:36오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/7 "2019-10-18T18:36:36Z")
@itsbhanusharma 감사합니다. 네, try에서 가져온 코드입니다. 이제 제 요구사항에 맞게 수정하겠습니다.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [6월 27, 2023, 12:05오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/8 "2023-06-27T12:05:29Z")
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6월 27, 2023, 12:11오후 UTC](https://meta.discourse.org/t/how-to-add-top-menu-bar-like-try-discourse-org/131210/9 "2023-06-27T12:11:57Z")