hamburger icon on right side

is it possible to move the hamburger menu icon to right side as this is RTL site…
thanks

Hello,

Basel theme is RTL ready. As soon as you set an RTL language everything would be aligned accordingly. Please provide your site admin access if it does not work by default.

Best Regards

ok here ia admin access:

Hello,

We can provide custom CSS that would revise all the elements in the header and they would be aligned as LTR. However, it is not possible to replace the hamburger icon only.

Best Regards

yes i would love that. also if you can flip in product page the picture+ gallery & description.

so that description is on the right, pic in the middle and additional images on left…

so i want the hamburger icon to be on the right side. (in mobile)

in addition if you could move in the product page the description to the right and the picture to the left. (in desktop)

Hello,

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

body.rtl .main-header {
	direction: ltr;
}
body.rtl .main-header .right-column {
	text-align: right;
	padding-left: 15px;
  padding-right: 0;
}
body.rtl .right-column > div {
	margin-left: 10px;
  margin-right: 0;
}
body.rtl .main-header .site-logo {
	padding-left: 0;
	padding-right: 15px;
}
body.rtl .main-header .main-nav {
	direction: rtl;
}
body .product-design-compact .product-image-summary>.row {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
}

This code covers your needs for header and product page.

Best Regards

Thank you.

the only problem is in mobile now when you slide down, the sticky header is moving to the left again. any chance to make the sticky header on the right side too?

Hello,

Please replace the custom provided before for this one:

body.rtl .sticky-header,
body.rtl .main-header {
	direction: ltr;
}
body.rtl .sticky-header .right-column,
body.rtl .main-header .right-column {
	text-align: right;
	padding-left: 15px;
  padding-right: 0;
}
body.rtl .right-column > div {
	margin-left: 10px;
  margin-right: 0;
}
body.rtl .sticky-header .site-logo,
body.rtl .main-header .site-logo {
	padding-left: 0;
	padding-right: 15px;
}
body.rtl .main-header .main-nav {
	direction: rtl;
}
body .product-design-compact .product-image-summary > .row {
	flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
}

Best Regards

[Author]

Posts