Hi everyone. [image] Add button to top menu Development 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. [image] Custom Header Links Theme component discourse2 Summary Custom Header Links allows you to easily add custom text-based links to the header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link GitHub - discourse/discourse-custom-header-links · GitHub open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Desktop [Capture] Mobile [Capture] (due to very limited space, adding more than one link on mo… [Ekran görüntüsü 2024-06-12 114712]

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. :thinking:

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.

Do you mean an icon in this area, for example? [image] Can you elaborate on what you’re looking for exactly?

Hi @Arkshine [Ekran görüntüsü 2024-06-14 164646] 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?

[image] 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 [image] Add button to top menu Development 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 :pray:

Thanks! Try to add this CSS: .floating-search-input-wrapper .floating-search-input { margin: auto; } [image]

[image] Arkshine: .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.

I’m logged in, and it displays as expected. I see the search centered. See my screenshot. :thinking:

It seems to be shifted a little to the left. [Screenshot_20240614_165907_Chrome]

How to add a button to the header area?

Development

ogulcan1787 June 15, 2024, 4:41pm 18

Thank you so much Arkshine

Topic		Replies	Views
Add button to top menu Development	18	6855	July 17, 2020
How can I add a new button to the topbar? Product Support	1	971	July 3, 2022
Header search in custom header Development	2	785	December 21, 2022
Custom Buttons with own functions Product Support	6	1346	October 15, 2020
Adding a link into the mobile header Product Support	5	1850	January 21, 2019

How to add a button to the header area?

Related topics