# Advanced Search Banner **URL:** https://meta.discourse.org/t/advanced-search-banner/122939 **Category:** Theme component **Tags:** official, deprecated, search-banner, advanced-search-banner **Created:** [15 juli 2019 om 03:49 UTC](https://meta.discourse.org/t/advanced-search-banner/122939 "2019-07-15T03:49:07Z") **Posts on this page:** 20 **Page:** 2
### Author: ![PT\_LB](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pt_lb/32/319089_2.png) [@PT\_LB](https://meta.discourse.org/u/PT_LB) #### Post date: [8 juli 2024 om 11:34 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/155 "2024-07-08T11:34:42Z")
the issue is with : ```plaintext conditional-loading-section:not(.is-loading) { transition: opacity 5s ease-in-out; } ``` You can’t use the custom CSS to set this to `none` this is getting overwritten by the theme default `conditional-loading-section.scss` ---
### Author: ![Eman\_Ahmed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eman_ahmed/32/542047_2.png) [@Eman\_Ahmed](https://meta.discourse.org/u/Eman_Ahmed) #### Post date: [22 augustus 2024 om 08:38 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/156 "2024-08-22T08:38:43Z")
Is there a possibility to reposition the search banner? @awesomerobot For example to change the alignment from center to the right or just adjust the position by moving it slightly to the right? ---
### Author: ![Overgrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/overgrow/32/478189_2.png) [@Overgrow](https://meta.discourse.org/u/Overgrow) #### Post date: [22 augustus 2024 om 08:44 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/157 "2024-08-22T08:44:31Z")
Not using Theme component settings, but that’s something you can easily achieve using your own custom CSS. ---
### Author: ![Eman\_Ahmed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eman_ahmed/32/542047_2.png) [@Eman\_Ahmed](https://meta.discourse.org/u/Eman_Ahmed) #### Post date: [22 augustus 2024 om 08:46 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/158 "2024-08-22T08:46:46Z")
We are using it to position the background image instead of text but unable to readjust the image with the search banner would highly appreciate providing the CSS code ---
### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge) #### Post date: [22 augustus 2024 om 16:22 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/159 "2024-08-22T16:22:03Z")
Using inspect element can help. Or even looking at this component’s CSS source or the Air Theme as the first part of the CSS under common first few lines target the search banner with mods targetting it. Untested as an not XP the issue you mention. ```plaintext .display-search-banner { #main-outlet { padding-top: 2em; align: center !important; } ``` Put this code in a custom #Customization > Theme component CSS common. I can appreciate the desire for ppl to provide how to code. As I am still learning myself. However we need to also work on educating ourselves with the basics. You can possibly test the “align: center !important;” using your browser’s inspect element. ---
### Author: ![aosus](https://avatars.discourse-cdn.com/v4/letter/a/ed8c4c/32.png) [@aosus](https://meta.discourse.org/u/aosus) #### Post date: [1 september 2024 om 10:47 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/160 "2024-09-01T10:47:52Z")
this looks great, however when using it in the RTL layout it seems that the padding doesn’t translate correctly. LTR: ![image](https://global.discourse-cdn.com/meta/original/4X/c/4/4/c4429247668d54b24111d2ffe58ae344be5338b9.png) RTL: ![image](https://global.discourse-cdn.com/meta/original/4X/c/a/b/cab503cdb2382c9ff7014bb4d566ebb1fd816a32.png) it seems that the padding for the settings icon and the place holder are switched in RTL mode. ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [6 september 2024 om 21:37 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/161 "2024-09-06T21:37:24Z")
Thanks for letting us know! I’ve just made an update that should fix it. [https://github.com/discourse/discourse-search-banner/pull/67](https://github.com/discourse/discourse-search-banner/pull/67) ---
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [21 september 2024 om 13:13 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/162 "2024-09-21T13:13:39Z")
On latests 3.3.1 tests-passed, **only on mobile** category icons on autocomplete search results are not displayed. I can reproduce the issue even in [safe mode](https://meta.discourse.org/t/53504?silent=true) with all plugins disabled. You can try here on our home page: [forum.cannabisanbauen.net](http://forum.cannabisanbauen.net) ![Screenshot 2024-09-21 at 15.13.08](https://global.discourse-cdn.com/meta/original/4X/7/f/f/7ff70b275a8a44ba4b156b1465ec75be9a458114.png) ---
### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine) #### Post date: [21 september 2024 om 14:21 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/163 "2024-09-21T14:21:53Z")
Here’s a quick fix in waiting for an official fix: ```css .search-menu { .search-link { .badge-category { display: inline-flex; } } } ``` * * * It seems related to this CSS: > The badge category doesn’t have the proper display. ![This image shows a computer screen with a web browser open, displaying HTML and CSS code. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/7/1/f/71fb21e98b7321858c3ef1f7fa7afecb74ca9b2e.png) However, there is already an `inline-flex` on `.badge-category`, so I think it’s safe to remove the CSS in the component. 🤔 > ---
### Author: ![jbell](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jbell](https://meta.discourse.org/u/jbell) #### Post date: [29 oktober 2024 om 00:38 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/168 "2024-10-29T00:38:00Z")
I’ve added this and set my text, but it only appears for logged in users, not logged out users? I have the settings set to Both: Logged In: ![image](https://global.discourse-cdn.com/meta/original/4X/f/b/8/fb8f4f9c869e3a52f8a94ea19c89cdeec0d02f51.jpeg) Logged out: ![The image depicts a search page with a red background and white text. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/f/1/6/f16a2f74141c665187be476b7737d0973cac57b3.jpeg) Settings: ![image](https://global.discourse-cdn.com/meta/original/4X/e/3/7/e37c63fc9f7ddec7fd606faeca61350de36a367b.png) ---
### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin) #### Post date: [29 oktober 2024 om 04:34 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/169 "2024-10-29T04:34:22Z")
What happens if you edit the English\_US translation too? I think when you are logged in, the language you chose in your preferences (or the site’s default locale) is used. When you are logged out, the text is shown in the language preference of your browser. So all users using a language you didn’t customize will see the default text. So maybe you want to customize even more languages. ---
### Author: ![jbell](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jbell](https://meta.discourse.org/u/jbell) #### Post date: [29 oktober 2024 om 13:01 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/170 "2024-10-29T13:01:20Z")
Oh perfect, thank you that worked! ---
### Author: ![martin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martin/32/491371_2.png) [@martin](https://meta.discourse.org/u/martin) #### Post date: [17 maart 2025 om 01:52 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/171 "2025-03-17T01:52:29Z")
FYI all, we are imminently merging a simplified version of this into core [FEATURE: Add welcome banner to core by martin-brennan · Pull Request #31516 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/31516) . This component is still supported, but it has been renamed to Advanced Search Banner from this PR onward [DEV: Update theme name to Advanced Search Banner by martin-brennan · Pull Request #84 · discourse/discourse-search-banner · GitHub](https://github.com/discourse/discourse-search-banner/pull/84) . If this component is installed, the core welcome banner will not be displayed. ---
### Author: ![durkin](https://avatars.discourse-cdn.com/v4/letter/d/5f8ce5/32.png) [@durkin](https://meta.discourse.org/u/durkin) #### Post date: [6 mei 2025 om 19:54 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/172 "2025-05-06T19:54:36Z")
Hi gang. I’ve added this component to my site. It shows the title text, but it’s not showing the actual search bar. Any idea if others are having this issue? ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [6 mei 2025 om 19:57 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/173 "2025-05-06T19:57:34Z")
Are you using a narrow screen or a mobile device? it appears there’s currently an issue with the search bar not appearing in these cases ---
### Author: ![durkin](https://avatars.discourse-cdn.com/v4/letter/d/5f8ce5/32.png) [@durkin](https://meta.discourse.org/u/durkin) #### Post date: [6 mei 2025 om 20:16 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/174 "2025-05-06T20:16:39Z")
I’m looking at my community page on my iphone (in a chrome browser). Hmmm. Anyone you think we can alert about this or is the individual who built it already aware? (I’m new to Discourse and am learning). ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [6 mei 2025 om 22:35 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/175 "2025-05-06T22:35:55Z")
Yep, I’m the person! I just added a fix for it — if you update the theme component the search box should appear now. ---
### Author: ![hanxiao\_Pan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hanxiao_pan/32/492161_2.png) [@hanxiao\_Pan](https://meta.discourse.org/u/hanxiao_Pan) #### Post date: [23 juni 2025 om 08:54 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/176 "2025-06-23T08:54:24Z")
Dit component wordt niet weergegeven in het Mint-thema. Maar ik heb het geprobeerd en het kan in andere thema’s worden weergegeven. ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [30 juni 2025 om 20:58 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/177 "2025-06-30T20:58:48Z")
Hi everybody! this week I’ll be [merging a change](https://github.com/discourse/discourse-search-banner/pull/98) that may impact custom styles you have added to this theme component. Since this search banner can appear on multiple pages, an H1 for the headline is not ideal, a H1 should help distinguish one page’s content from another. So the change replaces the H1 with a DIV with the class `custom-search-banner-headline`. So if you’ve applied styles to the H1 in a theme, you’ll want to change the `H1` to `.custom-search-banner-headline` — in some themes I’ve added the class in addition to the H1 to make the transition seamless, for example: > ---
### Author: ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy) #### Post date: [16 juli 2025 om 06:38 UTC](https://meta.discourse.org/t/advanced-search-banner/122939/178 "2025-07-16T06:38:24Z")
There appears to be a bug with the latest version. Running discourse 3.5.0.beta8-dev ([679d51a985](https://github.com/discourse/discourse/commits/679d51a98579d05f2741ac9148b056aa13fc3daa)) What’s happening is that when a new topic is opened (Chrome browser on Windows 10), the top row is supposed to have the search bar but it’s missing. If I disable the theme component the default discourse search bar shows up but if the component is enabled, the top search bar is missing AND also the search icon on the top right is missing. If I scroll down one line then the search button shows up on the top right but the search bar never shows up on the top line of a topic. Configured for Showon top\_menu and Plugin outlet on above\_main\_container. Pretty sure it used to show up on the top row earlier even for topics. The problem is that until the user scrolls there’s no way to search since both the search icon and search bar are missing. If I disable the theme then the default search bar and icon show up just fine i.e. when the page loads, the search bar shows up and when the user scrolls down one line the search bar disappears and the instead the search icon shows up. [Previous page](https://meta.discourse.org/t/advanced-search-banner/122939.md?page=1) [Next page](https://meta.discourse.org/t/advanced-search-banner/122939.md?page=3)