1

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 ----- */
2
  • Does this answer imply that it's possible to use php if statements inside a css file? If so, then maybe I could do something like this: <?php if ( !is_front_page() ): ?> ... Jul 13 at 3:06
  • 1
    You cannot use PHP in a CSS file, no. Jul 13 at 3:50
2

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' );
        }
    }
);
4
  • 1
    No, it's not possible. You could do something similar if you use Sass or PostCSS, but that would require a build step. Jul 13 at 13:19
  • Awesome, thank you - your alternative solution seems like the most efficient, but I wonder if it is slower to process? Jul 13 at 13:27
  • 1
    Its performance impact will be next to nonexistent. Jul 13 at 16:07
  • Thanks very much for your insights! Jul 14 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.