How do I change the sidebar menu style in Simple theme?

Store Design
1

Hello Shopify users!

I am having trouble changing the sidebar menu style in the Simple theme for my site: EternalAdoration.com

I want the mobile version of the menu to open up from the left, either pushing the page to the right or just hovering over the page. Many online shopping websites have their menus like this.

Now, the desktop version of the menu is already positioned on the left. I would like to keep it this way.

I understand this may be a difficult concept to convey with words, so if you have any questions, please reach out.

I have identified what I believe is the part of the code for the mobile sidebar menu. I have included it below:

(I apologize for the lack of indention - I tried)

.mobile-menu-icon {
@include prefix(transform, rotate(0deg), webkit moz ms o);
@include prefix(transition, 0.5s ease-in-out, webkit moz ms o);
width: 6.66 * $mobile-icon-line-thickness;
height: 5 * $mobile-icon-line-thickness;
display: block;
position: relative;
margin: (2 * $gutter / 3) auto;
color: $color-nav;
background: none;
border: 0;
outline: none;

.line {
@include prefix(transform, rotate(0deg), webkit moz ms o);
@include prefix(transition, 0.25s ease-in-out, webkit moz ms o);
display: block;
position: absolute;
height: $mobile-icon-line-thickness;
width: 100%;
background: $color-nav;
border-radius: $mobile-icon-line-thickness;
opacity: 1;
left: 0;
}

.line:nth-child(1) {
top: 0;
}

.line:nth-child(2),
.line:nth-child(3) {
top: $mobile-icon-line-thickness * 2;
}

.line:nth-child(4) {
top: $mobile-icon-line-thickness * 4;
}

&.open {
.line:nth-child(1) {
top: $mobile-icon-line-thickness * 2;
width: 0%;
left: 50%;
}

.line:nth-child(2) {
@include prefix(transform, rotate(45deg), webkit moz ms o);
}

.line:nth-child(3) {
@include prefix(transform, rotate(-45deg), webkit moz ms o);
}

.line:nth-child(4) {
top: $mobile-icon-line-thickness * 2;
width: 0%;
left: 50%;
}
}
}
1 Like
2

@EternallyAdore

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hello @KetanKumar ,

Thank you for your response.

Site URL is www.eternaladoration.com

4

@EternallyAdore

thanks for details yes i can see it proper working both desktop and mobile

5

Hi @EternallyAdore ,

  • With “open up from the left”: This will be a complex request, you need to change the JS and CSS for it. Therefore, it will be difficult for someone to guide you in detail. If you want, you can hire experts for it, they will help you quickly. Refer group: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

  • With “over the page”: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	.site-nav{
		position: absolute;
		z-index: 9999;
		background: #fff;
		width: 100%;
		left: 0;
	}
}

Hope it helps!

1 Like
6

Hi @EternallyAdore ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.