Hi, Help on doing custom header

[arkenciel]

Hi, im trying to change my header like this

with another logo on white, I do have the file btw, but with a transparent background so the image of the image banner could be part of the header background. But only in my home page

Does anyone now how should approach this?

My site is https://www.amiemx.com/

[BSS-Commerce]

Hi @arkenciel 

Sorry for late response. You can consider our suggestion.

We have checked your store and found that you are using Dawn theme. So you can follow these steps:

Step 1: Go to Admin -> Themes, select Edit code.

Find the file after header.liquid and add this following code from line 469 to 504. 

<script> 
  if (window.location.pathname === '/') {
    const header = document.getElementsByTagName('sticky-header')[0];
    const utilityBar = document.getElementsByClassName('utility-bar')[0];
    const announcementBar = document.getElementsByClassName('announcement-bar__message')[0];
    const menuItems = document.querySelectorAll('.list-menu li a span');
    const summary = document.querySelector('header-drawer summary');
    const iconSearch = document.querySelector('.modal__toggle-open.icon.icon-search');
    const iconAccount = document.querySelector('.header__icon--account');
    const iconCart = document.querySelector('.header__icon--cart');
    const iconMenu = document.querySelector('.header__icon--menu');
    const headerHeading = document.querySelector('h1.header__heading');
    const headerNew = document.getElementsByTagName('header')[0];
    const newDiv = document.createElement('div');
    newDiv.setAttribute('style', 'height: 50px;');
    const img = document.createElement('img');
    for (let i = 0; i < menuItems.length; i++) {
      menuItems[i].style.color = '#ffffff';
    }
    img.src='https://res.cloudinary.com/dzlovjzfj/image/upload/v1686192887/2023-06-08_095228-removebg-preview_c3do51.png';
    img.style.height = '100%';
    
    newDiv.appendChild(img);
    headerNew.appendChild(newDiv);
    headerHeading.style.display = 'none'; 
    iconMenu.style.color = '#ffffff'; 
    iconSearch.style.color = '#ffffff'; 
    iconCart.style.color = '#ffffff'; 
    iconAccount.style.color = '#ffffff'; 
    header.style.backgroundColor = '#004d99';
    announcementBar.style.color = 'white';
    utilityBar.style.backgroundColor = '#004d99';
    header.style.borderBottom = '1px solid white'
    header.style.borderTop = '1px solid white'
  }
</script>

Step 2: 

You can upload your logo image to the cloud and replace it with your url in the code above

img.src=''enter your image url here";

Here's the result:

https://www.loom.com/share/5d88d2e3c8d84a6297d87ec60c56624e 

If it worked, please mark our comment as a solution. Good luck!