Desktop Mobile menu css breaks when I add product page

I've been using the forced mobile menu CSS for my website for a while with no issues but today I added a product page and that broke my CSS for some reason. First img is what it usually looks like and the second image is what happened when I added the product page. Website password is 1234

Here's the code is usually use:

// Forced mobile //
@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}
// Hide nav elements //
.header-nav, .header-actions .btn  {
  display: none;
}

Website is: https://oleander-hawk-bxst.squarespace.com/

1234

Adding a store shouldn't have affected your CSS, what happens when you remove the store page?

5 hours ago, Ziggy said:

Adding a store shouldn't have affected your CSS, what happens when you remove the store page?

It went back to normal

Hey, that's so strange. I don't understand the mechanism that would cause that. Is it to do with the store page having a background image on the first section?

20 minutes ago, Ziggy said:

Hey, that's so strange. I don't understand the mechanism that would cause that. Is it to do with the store page having a background image on the first section?

Unfortunately, no. I used both store templates and used different sections to see if it would make a difference but it has not.

Update: I just switched to this CSS that I used on an older website and it went back to normal:

// Forced mobile //
@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}
// Hide nav elements //
.header-nav, .header-actions {
  display: none;
}

-----

I'm not sure why this one is compatible with a product page but the other one isn't.

44 minutes ago, Simplymarble said:

Update: I just switched to this CSS that I used on an older website and it went back to normal:

That's good, if unexplained!