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 ----- */

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

There’s nothing like that with media queries. You need to include the exclusion in your CSS selectors, like this:

body:not(.home) .site-header {
    // etc.
}

Alternatively, if this is the only CSS in a particular file, you could just not enqueue it on the homepage:

add_action(
    'wp_enqueue_scripts',
    function() {
        if ( ! is_front_page() ) {
            wp_enqueue_style( 'my-stylesheet', '/url/to/stylesheet.css' );
        }
    }
);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0