Unable to change Flatsome's menu responsiveness breakpoint

Question

I'm trying to toggle my mobile menu at 1172px as the default is 850px but it's not working.

My web is: www.maria-educandoconamor.com

I'm current using the following css to achieve it:

@media only screen and (max-width: 1172px) {
.header-nav, .header-nav-main, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none !important;
}

.mobile-nav, .nav.nav-left {
display: flex !important;
}
}

But unfortunately it's not working.

Does somebody know what I'm doing wrong?

Thanks.

Answer 1

The following css should do the trick. However, this will adjust the breakpoints for all tags which are labled with the show-for-medium, hide-for-medium, ... classes.

@media only screen and (min-width: 1173px) {
    .show-for-desktop {
        display: flex !important;
    }
    .show-for-medium, .hide-for-desktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1172px) {
    .hide-for-medium {
        display: none !important;
    }
    .show-for-medium {
        display: flex !important;
    }
}

If you want to adjust the breakpoints only for tags inside your header. You can use the following css. Note that a space between the selectors means AND while a comma means OR.

@media only screen and (min-width: 1173px) {
    div.header-inner .show-for-desktop {
        display: flex !important;
    }
    div.header-inner .show-for-medium, div.header-inner .hide-for-desktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1172px) {
    div.header-inner .hide-for-medium {
        display: none !important;
    }
    div.header-inner .show-for-medium {
        display: flex !important;
    }
}

See also this question: flatsome menu responsiveness breakpoint.