Change the Search bar position and add the social media links to the footer

Hi @Coco,

In order to answer your first question, I see that you are using Copenhagen theme, go to your header.hbs file and replace the code from line no. 2 to line no. 6 with the below code -

<div class="header-search-wrapper">
  <div class="logo">
    {{#link 'help_center'}}
      <img src="{{settings.logo}}" alt="{{t 'logo'}}">
    {{/link}}
  </div>
  
  {{search submit=false instant=true class='search search-full hide'}}
</div>

Now go to your style.css and paste the below code at the bottom of your file -

.header-search-wrapper {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  justify-content: space-between;
}

.search-full.hide {display: none;}
 
.logo {margin-right: 20px;}
.search.search-full {
  max-width: 380px; //Update width to change the width of search bar on mobile devices
  width: 100%;
}
 
@media (min-width: 768px) {
 .header-search-wrapper {justify-content: flex-start;}
 .search.search-full {
   margin-right: 20px;
   max-width: 400px;
 }
}
 
.search-full input[type="search"] {
 border: 1px solid #DDD;
}

Now go to your home_page.hbs file and paste the below code at the top of your file.

<script>
  $('.search-full').show();
</script>

Let me know if you face any issues.

Thanks

Team Diziana

Hi @Trapta, 

Thank you so much for your help. I have pasted the code and it's working. However, is it possible to only move the search bar to the upper left corner of Home Page and keep the same position on others page? 

The category, section and article page (want to remove the search bar at the upper left corner and keep the original one. 

For the mobile layout, the size of the search bar is a bit too long, can you please advice how to adjust the size on mobile devices? 

Thank you!!

Best,

Coco

@Coco,

I have updated my code in the above comment. Please give it a shot and let me know if you face any issue.

Team Diziana

Hi @Trapta,

I have tried again but still the same. Could you please have a look again.

- The category, section and article page (want to remove the search bar at the upper left corner and keep the original one. )

- For the mobile layout, the size of the search bar is a bit too long.

Thank you!!

Best,

Coco

@Coco,

Are you sure you have added the updated code? Make sure that you have replaced all the code with the updated one which includes HTML, CSS, and JS.

I looked at your HC and it seems like you missed the code. However, I have updated it again to reduce the size of the search bar on mobile devices.

I have also highlighted it in the code so that you can reduce the width of search bar as per your need.

Let us know if you face any issue.

Team Diziana

Hi @Trapta,

Thank you so much!! It's working now and looks perfect!

Best,

Coco