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.
User | RANK |
---|---|
178 | |
147 | |
81 | |
67 | |
56 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023