Logo moving at different screen widths and header changing completely

Store Design
, , ,
1

Sooooo, we Installed a hamburger menu for desktop, I know it’s considered retro but it matches our main site. This works fine, but we have an issue with the logo position. We want it centered across all views, screen sizes. It works fine on mobile and on the homepage fine in desktop but then shifts at 990px everywhere else across the site.

In addition, at any point when the screen sized goes between 990px-1024px - the header changes drastically. Both things driving us crazy - and would love some help (its preventing us from launching).

For context: We are using Dawn v9.0, and have tweaked so much we can’t evolve up or down so need to fix what we have. In the theme editor our logo is set to top left. We have at some point tweaked the code to center it but have lost what we used. School-boy errors all round. This is our first time building a store and we are not developers (that’s probably obvious haha).

Site: https://shop.artreview.com
psw: 4rtR3view

This is good under 990px.png
This is good under 990px.png1996×694 56.8 KB

Weird break happening between 990-1024px.png
Weird break happening between 990-1024px.png2024×774 53.6 KB

off cneter above 1024px.png
off cneter above 1024px.png2096×668 55.4 KB

2

Hi @AlF15H

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

Thank you for responding with this suggestion @PageFly-Noah - we added this and refreshed but it made no obvious difference to the logo position after 1024px unfortunately.

It did change the view between 990-1024px slightly, but its now dropping the menu completely.

Screenshot 2023-10-18 at 15.01.18.png
Screenshot 2023-10-18 at 15.01.18.png2014×650 31.8 KB

I wonder if tweaks we have made in the css is conflicting?

4

Hi @AlF15H

Please replace the code above with this one

Should force the menu to show

5

Hey @PageFly-Noah , thanks again! So, I added this and at first it didn’t seem to change anything. We made an adjustment to the header.liquid:

@media screen and (min-width: 990px) {
    header-drawer {
      display: flex;
    }
  }

  .menu-drawer-container {
    display: flex;
  }

Changing the ‘.menu-drawer-container’ from ‘none’ to ‘flex’ and it seems to have helped a fair bit. That’s one portion of the problem solved I think :slightly_smiling_face:

The logo position is still a bit of a mess from 990-1023px and is way off to the left side, and then just slightly off at 1024px onwards. Gonna have another look at the header.liquid again and maybe the base.css. If I remove the following the logo stays centered perfectly (but then cart icon drops down):

.header__heading,
  .header__heading-link {
    justify-self: start;
  }

We seem to be fixing one this and breaking another at the same time argh!

6

@PageFly-Noah So, this may be a crude fix, I have no idea as I don’t really know what I am doing, but have managed to centre the logo by adding this code into the custom CSS:

.header {
  display: grid;
  grid-template-areas: 'left-icon heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

So job done for the moment. Thank you so much for you help and assistance - really very kind of you!!

7

Hi @AlF15H Sorry for keep you waiting.

I’m so glad to hear that the issue has been solved.

Let me know if you need any help.