wishlist header icon messes logo positioning on mobile version

[Dimpsy]

hi people i need some help...i want to add a wishlist on my eshop (using Dawn theme )and so far only the wishlist hero fits my needs and its great overall with just one issue...at least in my case...the issue is that the icon on the header causes my eshop logo to move to the left on the mobile version......i fixed that with css code but when i click the logo its box layout which should appear behind the logo for a split second actually appears to the left where my logo was pushed because of the wishlists icon.....and that looks ugly.......i have deleted the app but the icon was stuck on my header so i had to revert to a backup version of the theme cause it was troublesome to locate its hooks and delete them... so now i am at the point where my shop works perfect but i have no wishlist.....and its a same cause wishlisthero really displays everything great for my case except the issue of its header icon messing my logos position on mobile version....anyone familiar with that?

[Dimpsy]

I have figured it put thnx...the header grid padding needed jome adjustment as well as the logos margin...i am all good now thnx

[DaisyVo]

Hi @Dimpsy 

It sounds like you're facing a frustrating issue with the Wishlist Hero app affecting your Dawn theme's logo placement on mobile. Here’s a step-by-step plan to help you fix this without needing to abandon the app:

1. Reinstall Wishlist Hero

First, reinstall the Wishlist Hero app, as you've already identified it fits your needs. This step ensures all elements are in place for customization.

2. Adjust Header Layout Using Custom CSS

To fix the logo's shifting issue, you can use custom CSS to properly align the wishlist icon and logo. Here's a sample CSS code you can use:

@media screen and (max-width: 768px) {

  .header__logo {

    position: relative;

    left: 0; /* Ensures the logo stays in place */

    transform: translateX(0);

  }

  .wishlist-icon {

    position: absolute;

    right: 10px; /* Adjust this value to position the wishlist icon properly */

    top: 50%; 

    transform: translateY(-50%);

  }

}

Where to Add CSS:

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click Customize for the Dawn theme.
4. In the theme editor, go to Theme Settings > Custom CSS and paste the code.

Save and check if the changes resolve the logo alignment issue.

3. Fix the Box Layout Issue on Logo Click

The box layout flashing to the left suggests the wishlist icon might be affecting the DOM structure or layout calculations. This happens due to improper styles being applied dynamically. You can override this by ensuring the position and z-index for the logo container are consistent. Add the following CSS:

@media screen and (max-width: 768px) {

  .header__logo {

    position: relative; 

    z-index: 10; /* Ensure the logo stays above other elements */

  }

  .wishlist-box-layout {

    display: none !important; /* Prevent unwanted layout flashes */

  }

}

4. Locate and Remove Residual Hooks (Optional)

Since you previously reverted to a backup version, residual Wishlist Hero hooks in the code could still be causing issues. To clean this up:

1-Go to Online Store > Themes > Edit Code: https://prnt.sc/r0ZeLlFUxHSK

2-Check the following files:

• header.liquid or theme.liquid
• base.css or any custom stylesheets

3-Search for terms like wishlist, wishlist-icon, or related class names, and delete any redundant code.

5. Test on Mobile Devices

Once you’ve applied the fixes, use your browser's developer tools (e.g., Chrome DevTools) to simulate a mobile view and test. Alternatively, check your site directly on a mobile device to ensure everything looks correct.

6. Contact Wishlist Hero Support (Optional)

If the problem persists, it may be worth reaching out to Wishlist Hero’s support team. Provide them with screenshots and describe the issue—they might have a tailored solution for your theme.

If you try these steps and something still doesn’t work, feel free to reply with the specific issue or share screenshots of the problem. I’ll be happy to guide you further!

Best regards,
Daisy