Support » Theme: Twenty Twenty-One » Change Breakpoint / Show Mobile Menu from 1100 instead of 481pixel

  • The mobile menu is shown from a screen width of 481 pixels, but I would like to show it from 1100 pixels (because I have many menu items). How do I do that and which class from the style.css do I have to overwrite in a custom.css?

    I would like to realise this without the additional installation of a plugin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hello,

    This thread has CSS to do what you require …

    Oliver

    thank you, the code does not work for me. I don’t like to install many plug-ins. I tried your plugin, but this particular function is chargeable. No problem, thanks anyway for your effort.

    Try this …

    @media only screen and (max-width: 1099px) {
        .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;
        }
        .menu-button-container {
            display: block;
        }
        .primary-navigation > .primary-menu-container {
            visibility: hidden;
            opacity: 0;
            position: fixed;
            padding-top: 71px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 25px;
            background-color: #d1e4dd;
            transition: all 0.15s ease-in-out;
            transform: translateX(0) translateY(0);
        }
        .primary-navigation > div > .menu-wrapper li {
            display: block;
            position: relative;
            width: 100%;
        }
        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;
        }
    }
    @media screen and (max-width: 782px) {
        .admin-bar .primary-navigation {
            	top: 46px;
        }
    }

    We appreciate people don’t like using too many plugins … that’s why we make ours so that they are as efficient as possible and the impact is minimal 🙂

    Oliver

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.