0

The mobile menu appears at 768px and I want to change that to a custom value.

I've read on here to do the following:

The JS for the menu that has that functionality can be found in

lib/web/mage/menu.js

First create the folder structure in your theme ex:

[Namespace]/[theme_name]/web/mage/

And copy menu.js from lib/web/mage/menu.js to [Namespace]/[theme_name]/web/mage/menu.js

And change

 mediaBreakpoint: '(max-width: 768px)'

to

mediaBreakpoint: '(max-width: 1025px)'

But this isn't working, can anyone help please?

2 Answers 2

5

Override

/vendor/magento/theme-frontend-blank/web/js/navigation-menu.js

in your theme

/app/design/frontend/Vendor/YourTheme/web/js/navigation-menu.js

Change in line No. 400

media: '(min-width: 768px)', 

TO

media: '(min-width: 1024px)',

Override

/vendor/magento/theme-frontend-blank/web/css/source/_navigation.less

in your theme

/app/design/frontend/Vendor/YourTheme/web/css/source/_navigation.less

Change in line No. 51

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

TO

& when (@media-target = 'mobile'), (@media-target = 'all') {
@media all and (max-width: (@screen__l)) {
    // Your code here
}
}

Change in line No. 275

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

TO

& when (@media-target = 'desktop'), (@media-target = 'all') {
@media all and (min-width: (@screen__l)) {
    // Your code here
}
}
2
  • 1
    That's awesome thanks so much! On mobile a search icon appears that toggles the search box. Do you know how to make that appear sooner with the rest of the mobile menu please?
    – Ordog
    Commented May 1, 2018 at 10:57
  • Sure, will check for search toggle and post here. if this answer works for you can you please accept and vote. :) Commented May 1, 2018 at 10:59
1

YOUR SECOND QUESTION :

On mobile a search icon appears that toggles the search box. Do you know how to make that appear sooner with the rest of the mobile menu.

MY ANSWER :

Override :

/vendor/magento/theme-frontend-luma/Magento_CatalogSearch/web/css/source/_module.less

in your theme :

/app/design/frontend/Vendor/YourTheme/Magento_CatalogSearch/web/css/source/_module.less

Old CSS :

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.block-search {
    float: right;
    padding-left: 15px;
    position: relative;
    width: 250px;
    z-index: 4;

    .label {
        &:extend(.abs-visually-hidden-desktop all);
    }

    .control {
        border-top: 0;
        margin: 0;
        padding: 0;
    }

    input {
        .lib-input-placeholder(@form-element-input-placeholder__color);
        margin: 0;
        padding-right: 35px;
        position: static;
    }

    .action.search {
        display: inline-block;
        .lib-button-icon(
        @_icon-font-content: @icon-search,
        @_icon-font-size: 16px,
        @_icon-font-text-hide: true,
        @_icon-font-color: @header-icons-color,
        @_icon-font-color-hover: @header-icons-color-hover,
        @_icon-font-line-height: 32px
        );
        .lib-button-reset();
        position: absolute;
        right: @indent__s;
        top: 0;
        z-index: 1;

        &:focus {
            &:before {
                .lib-css(color, @color-gray20);
            }
        }
    }
}

.search-autocomplete {
    margin-top: 0;
}
}

Replace below CSS with Old CSS:

& when (@media-target = 'desktop'), (@media-target = 'all') {
@media all and (min-width: (@screen__l)) {
    .block-search {
        float: right;
        padding-left: 15px;
        position: relative;
        width: 250px;
        z-index: 4;

        .label {
            border: 0;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .control {
            border-top: 0;
            margin: 0;
            padding: 0;
        }

        input {
            .lib-input-placeholder(@form-element-input-placeholder__color);
            margin: 0;
            padding-right: 35px;
            position: static;
        }

        .action.search {
            display: inline-block;
            .lib-button-icon(
                @_icon-font-content: @icon-search,
                @_icon-font-size: 16px,
                @_icon-font-text-hide: true,
                @_icon-font-color: @header-icons-color,
                @_icon-font-color-hover: @header-icons-color-hover,
                @_icon-font-line-height: 32px
            );
            .lib-button-reset();
            position: absolute;
            right: @indent__s;
            top: 0;
            z-index: 1;

            &:focus {
                &:before {
                    .lib-css(color, @color-gray20);
                }
            }
        }
    }

    .search-autocomplete {
        margin-top: 0;
    }
}
}
2
  • Welcome anytime. If search toggle works for you can you please vote and accept so another person use the same Commented May 1, 2018 at 13:42
  • 1
    Yep it worked, just voted this answer for you now :)
    – Ordog
    Commented May 2, 2018 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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