Mobile menu on desktop and on the left instead of right

Dear support,

Is it possible to keep the mobile menu on desktop? And is it possible to place it on the left, center the logo en keep the shopping cart on the right?

Kind regards,
Floris

Hello,

Could you please provide us an access to your website since we can’t see it now? We will analyze it and try to prepare a custom CSS fix for you.

Regards

Dear support,

Currently we still have the site under construction and use a maintenance mode plugin. But we have haven’t changed anything to the latest default Basel theme. Is it possible to get the custom CSS fix based on the default settings? This should definitely work.

We would like to achieve something similar to https://www.etq-amsterdam.com/.

Thanks in advance,
Floris

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

@media (max-width: 1024px) {
	.site-logo {
			padding-left: 40px!important;
	}
}

.main-nav> div {
	display:none;
}

.main-header .wrapp-header {
	position:relative;
}

.right-column .mobile-nav-icon {
		display: inline-block!important;
    position: absolute;
    top: 50%;
    left: -4px;
    margin-top: -15px;
    margin-left: 0;
}

.mobile-nav {
	display:block!important;
}

.website-wrapper {
	left:0;
}

.website-wrapper.left-wrapp {
	left:150px;
}

.website-wrapper.basel-wrapper-shifted {
	left:-150px;
}

.main-header {
    -webkit-transition: left .3s ease;
    transition: left .3s ease;
}

.basel-cart-opened .header-shop.act-scroll {
	left:-150px;
}

.act-mobile-menu .header-shop.act-scroll {
	left:150px;
}

Kind Regards
XTemos Studio

Hi,

Great support! Finally did it with the following code:

.main-nav.site-navigation.basel-navigation.menu-center {
display:none;
}

.main-header .wrapp-header {
position:relative;
}

.right-column .mobile-nav-icon {
display: inline-block!important;
position: absolute;
top: 50%;
left: 0px;
margin-top: -15px;
margin-left: 0;
}

.mobile-nav {
display:block!important;
overflow:hidden;
}
.main-header {
-webkit-transition: left .3s ease;
transition: left .3s ease;
}
.main-header .site-logo {
text-align:center !important;
margin: 0 auto;
width:100%;
padding-left:30px !important;
padding-right:0px;
}
.main-header .right-column {
padding-left:0px;
}
a.basel-logo {
max-width:200px;
margin:0 auto;
}
.right-column .shopping-cart {
margin-top: 14px;
}

Kind regards,
Floris

You are welcome!

[Author]

Posts