Break point for mobile

Hello,
is possible to change the breakpoint for mobile devices;
We want the breakpoint at 1240px not at 1024px.
Is possible to do that;

Best Regards.

Hello,

Please specify do you want to change the breakpoint only for header or for the whole site? If you want to change for the whole site, there is no option to do that.

Best Regards

Hello,
want to change the breakpoint only for the header.

Best Regards

Hello,

Please try this code:

@media (max-width: 1240px) {
	
	.main-header .main-nav, .main-header .woodmart-wishlist-info-widget, .main-header .wrapp-header>.woodmart-search-form, .sticky-header .main-nav, .sticky-header .woodmart-wishlist-info-widget, .sticky-header .wrapp-header>.woodmart-search-form {
		display: none;
	}
	
	.wrapp-header .woodmart-header-links {
	  position: fixed;
    top: -9999px;
    z-index: 600;
	}
	
	.header-mobile-center .header-left-side, .header-mobile-center .left-side, .header-mobile-center .right-column {
	    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
	}
	
	body .header-left-side {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	}
	
	body .mobile-nav-icon:not(.whb-mobile-nav-icon) {
		display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
	}
}

Please add it to Theme Settings > Custom CSS

Best Regards

Hello, could you please send new custom css code, this one does not work anymore. Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 1240px) {
	
	body .whb-visible-lg{
		display: none;
	}
	
	body .whb-hidden-lg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	
	.whb-row.whb-hidden-mobile {
		display: none;
	}
}

Best Regards

[Author]

Posts