Change Search Bar Position - Copenhagen Theme
AnsweredI would like to change the search bar position from the centre of the home page to the top right section, left of the user profile.
There is a guild on how to move the search bar to the top left, right of the logo, however following the instructions it's doesn't work. I also confirmed this with someone from Zendesk
Thanks in advance.
-
Start by adding the search helper to the nav class on the header.hbs
<nav class="user-nav" id="user-nav">
{{search instant=true class='search search-full'}}
</nav>You may have to make some style changes to get it to align with the other controls just the way you want it to, but this is the location.
Good luck!
-
Hi Amy
Thanks for the comment. Could you please be more specific regarding the instructions.
I assume I'm deleting from one location and am adding those lines of code to another.
As mentioned, I want to position the search bar left of the user profile on the home page.
Thanks again
-
These instructions will place the Search bar in the the header portion on every page, not just the Home page. Having different locations on the Home and other pages will take a little more coding. This solution is simpler.
1. Remove Search from Home page:
Open Home_page.hbs and delete or comment our the following code:
{{!-- <h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=settings.instant_search class='search search-full'}}--}}2. Remove Search from article pages (and section and category pages if there as well)
Open article_page.hbs and delete or comment out the following code
{{!-- <div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search scoped=settings.scoped_kb_search submit=false}}
</div>--}}3. Add Search to header
Open header.hbs and add following code before the <div class="nav-wrapper>
<div class="search-container">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search scoped=settings.scoped_kb_search submit=false}}
</div>4. open styles.css and modify the .search-container class as follows
.search-container {
position: absolute;
right: 200px;
width: 33%;
padding-right: 25px;
}Note: You'll want to play with this to get it to look just right in your help center, but this is a start. I'm also sure there are many ways to achieve what you ware looking to do. This is just one solution. I hope it helps get you where you need to be!
-
Hi Amy
These instructions done the trick.
I did have to go through some of the other pages and remove reference to the section of code you mention in point 1, but that's to be expected.
Thanks for your help, kudos to you :-)
-
Glad to hear it! :)
-
Dear Amy
Apologies if the wrong thread so please move if required.
I want to be able to reduce the width of the top home page image and it stay central (css class .hero - Hero component).
I tried to reduce the width from 100 to 50% and the image reduced from the left and didn't proportionally sit in the centre of the page.
Do you have any instructions to reduce the size of the image but keep it central on the page?
Thanks
-
Try setting
margin-right: 25%
margin-left: 25%
along with the width of 50%
-
Perfect, works a treat and very much appreciated Amy.
-
Hello
Is there anyway I can stop the now repositioned search bar from encroaching into the profile name when (making smaller) resizing the page.
Thanks in advance
-
under the Header section in styles.css, do you have this?
@media (max-width: 768px) {
.nav-wrapper .hide-on-mobile {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
} -
Hi Amy
Thanks for the reply, to answer your question; yes I have the same section of code.
-
Instead of moving search bar to header, is there anyway that I can change the position of the search bar?
-
Yes, this is definitely possible, but it will depend on what else you have going on your page. I would recommend reading up on the CSS Box Model to see the best way to accomplish this for your help center!
-
Hi,
I was able to get the search bar to show in the header based on the code that Amy Gracer provided. The only problem I ran into was that by adding step #4:
4. open styles.css and modify the .search-container class as follows
.search-container {
position: absolute;
right: 200px;
width: 33%;
padding-right: 25px;The search bar blocked the Submit button so I skipped that part and this is the result:
With the code:
Without this code:
-
Hi Ulises,
Yes, this is definitely possible, I think you need to tweak the code to adapt it to your Help Center.
Unfortunately, this is out of scope from Zendesk Support.
I will recommend reviewing and play around the values from the custom code.
For more information: CSS height and width Examples
Good luck!
-
Thank you for offering these instructions, Amy Gracer.
Does anyone know how to middle-align my search box in the heading? I would like it to be centered with the logo and links to the right.
Similarly, does anyone know how to update the spacing on the mobile app so that my Search box does not overlap the logo?
Thanks in advance!
Please sign in to leave a comment.
16 Comments