Hi, Help on doing custom header

10 0 4

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/


Reply 1 (1)
Shopify Expert
2441 330 338

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. 


  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.style.height = '100%';
    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'


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:



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



If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development | Free trials Shopify in 3-months with just 1$
Install B2B & B2C apps to accelerate sales