Header Appears Too Low on Website Need Help Fixing Alignment

Store Design
1

Hi there,
I’ve noticed that my logo appears too low on my website, especially when viewed on a mobile phone. Could someone please help me fix this? I’ve attached a photo to show how it looks. Thank you in advance!

My website is bubsandzazz.com

password: jswizzle

Screenshot 2025-01-27 at 11.12.48 AM.png
Screenshot 2025-01-27 at 11.12.48 AM.png768×1484 26 KB

1 Like
2

Hi! Are you from Shopify?

3

Hi @jcyzner

Your logo looks low on mobile because the image of the logo is square and a bit big, so it has an actual logo in the middle and a lot of top and bottom space. You should crop the image so it is just text with minimal space around it. Try it out. And watch out for “experts” who do not wish to help here directly, there are a lot of scams around.

4

Hi @Laza_Binaery ,

Thank you so much—it worked perfectly! I appreciate the heads-up too, haha. Thanks again for your help! :blush:

1 Like
5

Hi @jcyzner

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    transform: translateY(-30px);
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

To fix the alignment issue with your logo appearing too low in the header on mobile devices, you’ll need to adjust the CSS for your theme. Here’s how you can correct it:

Steps to Fix the Header Alignment1. Access Your Theme Code:

  • Log in to your Shopify admin and go to Online Store > Themes.
  • Next to your active theme, click Actions > Edit Code.

  1. Edit the CSS File:

    • Open the file named base.css, theme.css, or something similar (depends on your theme setup).
    • Look for the CSS rules related to the logo or header, or add a new section for mobile-specific adjustments.

  2. Add or Adjust Mobile-Specific CSS:

    • Add the following CSS at the bottom of the file:
@media (max-width: 768px) { /* Adjusts for mobile screens */
    .header__logo { /* Replace with your theme's specific logo class */
        margin-top: 0; /* Adjust this value to reposition vertically */
        display: flex;
        align-items: center; /* Centers the logo */
        justify-content: center; /* Centers horizontally */
    }
}​

  • Replace .header__logo with the actual class name used for your logo. Use your browser’s Inspect Element tool to confirm the class name.

  • Save Your Changes:

    • Click Save and refresh your website on a mobile device to verify the alignment.

Alternative Without Coding

For a no-code solution, you can use an app like EasyEdits. It allows you to make visual tweaks like this easily without accessing the theme code.

Let me know if this solves the issue or if you need further help! :blush: