# How to add top bar?

**URL:** <https://meta.discourse.org/t/how-to-add-top-bar/70569>\
**Category:** Support\
**Created:** [22 Setembro , 2017 11:01 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569 "2017-09-22T11:01:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kudouyuzi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kudouyuzi/32/68780_2.png) [@kudouyuzi](https://meta.discourse.org/u/kudouyuzi)\
**Post date:** [22 Setembro , 2017 11:01 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/1 "2017-09-22T11:01:01Z")

</div>

How to add same this top bar?

 ![0 Build 3143 FAQ General Discussion Sublime Forum](https://global.discourse-cdn.com/meta/original/3X/e/8/e8f5c1b2e390eca0f030542c7616cd2be45737ed.jpg)

This is the demo site link [3.0 (Build 3143) FAQ - General Discussion - Sublime Forum](https://forum.sublimetext.com/t/3-0-build-3143-faq/31798)

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [22 Setembro , 2017 11:31 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/2 "2017-09-22T11:31:48Z")

</div>

That’s relatively easy to do 🙂  
Here’s how you get started: In Admin, go to Customize. There, you can create and edit themes and theme components. Create a new theme component, and give it a sensible name. Then, you can edit CSS and HTML there.

You’ll want to add the HTML for the bar in the Header section. Here’s a skeleton to get started – it’ll be themed like Discourse itself:

```html
<div class="custom-header">
    <div id="top-navbar" class="wrap">
        <ul class="nav nav-pills" style="margin: 0px;">
            <li class="top-navbar-links">
                <a href="https://meta.discourse.org/">Amazing Link</a>
            </li>
            <li class="top-navbar-links">
                <a href="https://meta.discourse.org/">Wonderful Link</a>
            </li>
        </ul>
    </div>
</div>

```

Don’t forget to enable the new theme component in the Default theme when you’re done 🙂

---

<div class="post-metadata">

**Author:** ![kudouyuzi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kudouyuzi/32/68780_2.png) [@kudouyuzi](https://meta.discourse.org/u/kudouyuzi)\
**Post date:** [22 Setembro , 2017 12:03 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/3 "2017-09-22T12:03:52Z")

</div>

its does not look good

---

<div class="post-metadata">

**Author:** ![BenM](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@BenM](https://meta.discourse.org/u/BenM)\
**Post date:** [22 Setembro , 2017 12:14 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/4 "2017-09-22T12:14:21Z")

</div>

He said it will be themed as Discourse, change and modify yourself to make it a way you want.

---

<div class="post-metadata">

**Author:** ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)\
**Post date:** [22 Setembro , 2017 12:43 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/5 "2017-09-22T12:43:34Z")

</div>

Yeah, it’s just meant as a starting point. Make it your own! 🙂

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [8 Junho , 2024 12:44 UTC](https://meta.discourse.org/t/how-to-add-top-bar/70569/6 "2024-06-08T12:44:17Z")

</div>

Este tópico foi automaticamente fechado após 2451 dias. Novas respostas não são mais permitidas.