Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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