Shopify themes, liquid, logos, and UX
Hi
I am looking to hide my hamburger menu and have the same menu displayed on all platforms, due to my menu only having one menu item. I have successfully managed to hide my hamburger menu in the Shopify Debut theme. However, when it is hidden, the menu item inside it is also hidden. I only have one menu item, which should be visible on all platforms but I am struggling to have it show on mobile.
Any help is much appreciated. 🙂
Solved! Go to the solution
This is an accepted solution.
hello @maron1209
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 768px) {
.mobile-nav-wrapper {
top: 60%;
left: 15%;
display: block;
background: transparent;
}
.site-header {
position: absolute;
background-color: transparent;
margin-bottom: -13px;
border-bottom: 0;
margint-top: 68px;
padding-top: 26px;
padding-left: 149px;
}
.mobile-nav--open{
visibility: hidden;
}
}
Hii, @maron1209
Can you provide me proper screenshot so,
I can see your problem and give you,
A proper solution.
Thank You.
Hi @Anonymous.
I have attached som photos showing my problem. The Shop menu item is not visible on mobile after I have hidden the hamburger menu. I want the nav menu to look exactly as on desktop, with the Shop nav-label at the left at the logo. 🙂
@Anonymous are you able to help?
hii, @maron1209
Your store is password protected provide me
Store Password.
Thank You.
I have sent you the password in a private message.
If you want to remove it from here then I think you need to visit halifaxremovals service website because there service is very impressive I tried them one time.
This is an accepted solution.
hello @maron1209
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 768px) {
.mobile-nav-wrapper {
top: 60%;
left: 15%;
display: block;
background: transparent;
}
.site-header {
position: absolute;
background-color: transparent;
margin-bottom: -13px;
border-bottom: 0;
margint-top: 68px;
padding-top: 26px;
padding-left: 149px;
}
.mobile-nav--open{
visibility: hidden;
}
}
Thank you so much!!! It works perfectly!!!
Hey, in updated theme. i am not to able to find theme.css. can you help me with that? where should I go to past this given code?
base.css, style.css or theme.scss.liquid
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024