Change Search Bar Position - Copenhagen Theme

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 @amy24 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:

Thank you for offering these instructions, @amy21.

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!