Moving the menu from right to left on mobile

Hi,
Is it possible to move the = button from the right to the left on mobile devices?
if so how can I do this?

Hi,

Try to add the following code snippet to the ‘Custom CSS for tablet” area in Theme Settings to fix this issue.

.wrapp-header {
  position: relative;
}

.right-column .mobile-nav-icon {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
}
	
.main-header.header-shop div.site-logo {
  padding-left: 50px;
}

Regards

Hi,

i am trying to use the snippet above. The position in the sticky header gets to much to the left, can you help to solve this?

Thanks!

Hi,

Try to add the following CSS snippet also

.sticky-header .right-column .mobile-nav-icon {
	left:10px;
}

Regards

Also, centered logo would be nice 🙂

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

@media (max-width: 991px) {

header.main-header.header-logo-center div.site-logo {
	position: absolute;
	left:50%;
	top: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	padding-left: 15px !important;
	padding-right: 15px !important;
	text-align: center;
	height: 70px;
}
}

@media (max-width: 767px) {
	
header.main-header.header-logo-center	.basel-logo-wrap {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}	
}

Regards

This worked awsome! Thank you guys!

Just a minor detail, could logo be centered in sticky header aswell? 🙂

Please, replace previous code snippet with the code below.

@media (max-width: 991px) {

.website-wrapper div.site-logo {
	position: absolute;
	left:50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	padding-left: 15px !important;
	padding-right: 15px !important;
	text-align: center !important;
	height: 70px;
}
	
.sticky-header .container,
.sticky-header div.site-logo{
	height: 60px;
}
	
.sticky-header .right-column .mobile-nav-icon {
	left: 15px;
}
}

@media (max-width: 767px) {
	
.website-wrapper .basel-logo-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translate3d(-50%);
	width: 60%;
	}	
}

Regards

Works perfectly! First class support 🙂

Thanks.

You are welcome!

[Author]

Posts