Responsive mobile layout

This topic has 4 replies, 3 voices, and was last updated 6 years, 5 months ago by StylingAgenten.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 4, 2018 at 9:25 am #65927

StylingAgenten
Participant

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.

July 4, 2018 at 11:46 am #65949
Elise Noromit
Member
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
July 8, 2018 at 9:07 pm #66635

StylingAgenten
Participant

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

July 9, 2018 at 6:43 am #66662
Bogdan Donovan
Keymaster
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
July 10, 2018 at 10:10 pm #66947

StylingAgenten
Participant

Great, thank you!
Author

Posts