Logo moving at different screen widths and header changing completely

[AllenF]

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

 

 

 

[PageFly-Noah]

Hi @AllenF 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>

@media screen and (min-width: 990px) and (max-width: 1023px) {
.header--top-left{
grid-template-areas: 'left-menu heading icons';
grid-template-columns: unset;
}
header-drawer {
display: block;
grid-area: left-menu;
}
.header__inline-menu {
    display: none;
  }
.header__heading {
justify-self: center;
}
}

</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[AllenF]

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.

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

[PageFly-Noah]

Hi @AllenF 

Please replace the code above with this one

<style>

@media screen and (min-width: 990px) and (max-width: 1023px) {
.header--top-left{
grid-template-areas: 'left-menu heading icons';
grid-template-columns: unset;
}
header-drawer {
display: block;
grid-area: left-menu;
}
.header__inline-menu {
    display: none;
  }
.header__heading {
justify-self: center;
}
}
@media screen and (min-width: 990px){
header-drawer {
    display: block;
}
}
</style>

Should force the menu to show 

[AllenF]

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 🙂

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!

[AllenF]

@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!!

[PageFly-Noah]

Hi @AllenF 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.