# How to add a button to the header area?
**URL:** https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749
**Category:** Development
**Created:** [June 12, 2024, 1:07pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749 "2024-06-12T13:07:36Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 12, 2024, 1:07pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/1 "2024-06-12T13:07:36Z")
Hi everyone.
> [@Add button to top menu](https://meta.discourse.org/t/add-button-to-top-menu/78366):
>
> I want to add a button (with a different color) to the top menu, and if possible align right How can i do this ?
I added the codes here to the required fields, but it didn’t work. Where am I making a mistake?
I also tried the plugin, but it breaks the search bar area.
> [@Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588):
>
> discourse2Summary Custom Header Links allows you to easily add custom text-based links to the header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links)hammer_and_wrenchRepository Link [GitHub - discourse/discourse-custom-header-links · GitHub](https://github.com/discourse/discourse-custom-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile (due to very limited space, adding more than one link on mo…
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [June 12, 2024, 1:46pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/2 "2024-06-12T13:46:14Z")
hmmm, yea I suspect you’re going to have to do some extra CSS work to get the header-bar to work with links.
Question, are you developing for mobile too? Because the header on mobile has way less space to add stuff. You don’t want to make a nice desktop site only discover that your mobile view is messy.
I can’t remember offhand, but there also may be a plugin-outlet there that you can use. 🤔
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 12, 2024, 1:59pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/3 "2024-06-12T13:59:58Z")
Hi Lilly.
I want to do this for desktop only.
The mobile view is fine now, I don’t want to narrow the header area there.
If it doesn’t happen by the way, it’s not a big deal. This button will redirect to a forum category.
I just wanted that button to give a nice atmosphere.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 1:06pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/4 "2024-06-14T13:06:57Z")
Do you mean an icon in this area, for example?
Can you elaborate on what you’re looking for exactly?
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 14, 2024, 1:47pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/5 "2024-06-14T13:47:07Z")
Hi @Arkshine
like Premium
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 2:18pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/6 "2024-06-14T14:18:14Z")
The plugin outlet here in this area is `before-header-panel`.
This is used by the _Custom Header Links_ and _Header Search_ components.
_Custom Header Links_ is the way to go!
As Lilly stated, you will need to adjust the CSS here.
From what I see, the _Header Links_ component uses some CSS on the outlet container, which may explain why it breaks the search.
If you don’t mind, can you enable the component again so I can look directly at your forum?
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 14, 2024, 2:31pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/7 "2024-06-14T14:31:32Z")
> [@Arkshine](#):
>
> Lilly’nin belirttiği gibi burada CSS’yi ayarlamanız gerekecek.
> Gördüğüm kadarıyla _Başlık Bağlantıları_ bileşeni çıkış kapsayıcısında bazı CSS’ler kullanıyor
> [@Add button to top menu](https://meta.discourse.org/t/add-button-to-top-menu/78366):
>
> I want to add a button (with a different color) to the top menu, and if possible align right How can i do this ?
It is explained here, but when I write the necessary codes, it does not work.
I enabled now you can look, thank you for help 🙏
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 2:41pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/8 "2024-06-14T14:41:08Z")
Thanks!
Try to add this CSS:
```css
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
```
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 14, 2024, 2:51pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/9 "2024-06-14T14:51:47Z")
> [@Arkshine](#):
>
> ```plaintext
> .floating-search-input-wrapper .floating-search-input {
> margin: auto;
> }
>
> ```
When I use this code, it looks normal to the anonymous user. But it doesn’t look normal to the logged in user. The reason is the codes I used to center the search bar.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 2:54pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/10 "2024-06-14T14:54:50Z")
I’m logged in, and it displays as expected. I see the search centered. See my screenshot. 🤔
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 14, 2024, 3:02pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/11 "2024-06-14T15:02:49Z")
It seems to be shifted a little to the left.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 3:05pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/12 "2024-06-14T15:05:16Z")
Yes, he manually added `margin-right: -35px;` to compensate with the headers panel, and now, with the link the value needs to be adjusted again.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 14, 2024, 3:34pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/13 "2024-06-14T15:34:36Z")
The reason I do this is because the search bar does not move left or right for the logged in member. The search bar remains in the same place both before and after you log in.
But it looks like it also affects the Custom Header Links plugin. I think I won’t put a button there for now. If we can add it with css and html I would like to try it.
Thank you for giving a time. 🤗
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 14, 2024, 5:39pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/14 "2024-06-14T17:39:56Z")
You also can make the search bar out of the flow with absolute position.
You won’t need `margin` anymore.
```css
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* header height - search height - margin - border */
width: 100%;
}
```
You might need to add a media query to control the width on lower resolution and ensure it doesn’t overlap with other elements.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 14, 2024, 6:29pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/15 "2024-06-14T18:29:10Z")
This is great thank you so much, I will control/check it. 🙏
But, when I enable Custom Header Links, the header section does not look normal.
This is not a big problem. I just wanted to add something visually to the header section.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 15, 2024, 3:52pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/16 "2024-06-15T15:52:45Z")
Hi @Arkshine I just realized. After this code, the logo cannot be clicked.
I think it’s related to the `position: absolute;` code.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 15, 2024, 4:27pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/17 "2024-06-15T16:27:47Z")
You can add that CSS to make the logo to stack above the search.
```css
.home-logo-wrapper-outlet {
z-index: 1;
}
```
You have another solution to CSS `floating-search-input` instead to avoid dealing with the sides (make sure to remove CSS on `floating-search-input-wrapper`) :
```css
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
```
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [June 15, 2024, 4:41pm UTC](https://meta.discourse.org/t/how-to-add-a-button-to-the-header-area/311749/18 "2024-06-15T16:41:14Z")
> [@Arkshine](#):
>
> ```plaintext
> .home-logo-wrapper-outlet {
> z-index: 1;
> }
>
> ```
Thank you so much Arkshine 🙏