Shopify themes, liquid, logos, and UX
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%;
}
}
}
Solved! Go to the solution
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!
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.
thanks for details yes i can see it proper working both desktop and mobile
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!
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024