Responsive mobile layout

Hi!
Is it possible to add an css code to define a max-width for the menu for the desktop version. I do want it to be switched to a mobile layout when the width is larger than default for the theme. I add an picture where you see that the header menu is in 2 rows before it use the mobile menu. I want it to switch to mobile menu before it will be 2 rows.

BR
Andreas

Attachments:

You must be logged in to view attached files.

Hello,

Please try this code, add it to Theme Settings > Custom CSS

@media (max-width: 1275px) {
	
	.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;
	}
}

Best Regards

Hi,
I did put the code in the field “Global Custom CSS”, and cleared the cache. I did not see any changes though. What did I do wrong?

BEst Regards
Andreas

Hi,

Please, try to replace the previous code snippet with code snippet below;

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

Regards

Great, thank you!

[Author]

Posts