menus – Excluding a media query from specific pages

I have built a media query for Twenty Twenty-One that makes the mobile menu appear for screens widths up to 1023px. (My CSS is below for those interested, I think it should be pretty universal.)

Because of the home page design, I have to exclude the home page from that query. How can I do something like this?

@media only screen and (max-width: 1023px) and (not(.primary-navigation-home)) {

The home page already has customization for the primary nav, easily identified by class <nav class="primary-navigation-home"> instead of .primary-navigation for all other pages.


I believe this is the minimum css necessary to override the standard TT1 mobile “hamburger” menu breakpoint(s). (Comments welcome)

/* ================== STYLE ADJUSTMENTS -- UP TO 1024PX ================== */
/* ----- HAMBURGER on sizes up to 1023px ----- */
@media only screen and (max-width: 1023px) {
    .site-header {
    padding-top: calc(0.75 * var(--global--spacing-vertical)) !important;
    padding-bottom: calc(0.75 * var(--global--spacing-vertical)) !important;
    }

    .primary-navigation {
    position: absolute;
    }

     .primary-navigation-open .primary-navigation > .primary-menu-container {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        border: 2px solid transparent;
    }

    .primary-navigation > div > .menu-wrapper {
        padding-bottom: 100px;
        padding-left: 0;
    }

    .primary-navigation-open .primary-navigation {
        width: 100%;
        position: fixed;
        z-index: 2;
    }

    .menu-button-container {
        display: block;
    }

    .primary-navigation > .primary-menu-container {
        height: 100vh;
        z-index: 499;
        overflow-x: hidden;
        overflow-y: auto;
        border: 2px solid transparent;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        padding-top: 71px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 25px;
        transition: all 0.15s ease-in-out;
        transform: translateX(0) translateY(0);
        background-color: var(--global--color-background);
    }

    .primary-navigation > div > .menu-wrapper li {
      display: block;
      position: relative;
      width: 100%;
    }

    .primary-navigation > div > .menu-wrapper .sub-menu-toggle {
      display: none;
    }

    body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu {
        padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
        padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
        margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6);
    }

    .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
        position: fixed;
        transform: translateY(0) translateX(100%);
    }
    body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container {
      position: relative;
      padding-top: 0;
      margin-top: calc(0px - var(--button--padding-vertical)) + 0.25 * var(--global--spacing-unit);
    }

    body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation {
        position: relative;
        top: 0;
    }

    .primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
        transform: translateX(0) translateY(0);
    }

    .primary-navigation-open .menu-button-container {
        width: auto;
    }

    .admin-bar .primary-navigation {
        top:32px;
    }

/* To get submenus to display properly */
    .primary-navigation > div > .menu-wrapper > li > .sub-menu {
        margin: var(--primary-nav--padding);
        position: relative !important;
        top: auto;
        padding-top: unset;
    }

    .primary-navigation .primary-menu-container > ul > .menu-item {
        display: block;
    }

    .menu-wrapper > li > .sub-menu::before, .primary-navigation > div > .menu-wrapper > li > .sub-menu::after {
        content: none !important;
    }

    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle ~ ul {
        display: block !important;
    }

    /* TEC listing page has huge space at top, even for mobile */
    .tribe-events .tribe-events-l-container {
        padding-top: 0px;
    }
}
/* ----- /HAMBURGER up to width 1023px ----- */