Hi everyone.
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.
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. 
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.
1 Like
Do you mean an icon in this area, for example?
Can you elaborate on what you’re looking for exactly?
Hi @Arkshine
like Premium
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?
4 Likes
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 
Thanks!
Try to add this CSS:
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
1 Like
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.
I’m logged in, and it displays as expected. I see the search centered. See my screenshot.
2 Likes
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.
2 Likes
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. 
1 Like
You also can make the search bar out of the flow with absolute position.
You won’t need margin anymore.
.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.
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.
Hi @Arkshine I just realized. After this code, the logo cannot be clicked.
I think it’s related to the position: absolute; code.
You can add that CSS to make the logo to stack above the search.
.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) :
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
Thank you so much Arkshine