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. 🙂
Mobile
Desktop
@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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025