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 2 replies - 1 through 2 (of 2 total)
  • Thread Starter fotoserver2019

    (@fotoserver2019)

    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 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Breakpoint / Show Mobile Menu from 1100 instead of 481pixel’ is closed to new replies.