Solved

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

EternallyAdore
Visitor
2 0 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%;
}
}
}

 

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 5 (5)

KetanKumar
Shopify Partner
36839 3635 11972

@EternallyAdore 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EternallyAdore
Visitor
2 0 1

Hello @KetanKumar,


Thank you for your response. 

Site URL is www.eternaladoration.com

KetanKumar
Shopify Partner
36839 3635 11972

@EternallyAdore 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

LitExtension
Shopify Partner
4860 1001 1132

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify