Solved

Remove hamburger menu and display menu item

maron1209
Excursionist
23 0 5

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. 🙂

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1421

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;
}
}

 

View solution in original post

Replies 13 (13)

Not applicable

Hii, @maron1209 
Can you provide me proper screenshot so,
I can see your problem and give you,
A proper solution.
Thank You.

maron1209
Excursionist
23 0 5

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. 🙂

 

MobileMobileDesktopDesktop

Not applicable

@maron1209 
Store URL??

maron1209
Excursionist
23 0 5
maron1209
Excursionist
23 0 5

@Anonymous are you able to help? 

Not applicable

@maron1209 

I will fix it but tomorrow. 

Not applicable

hii, @maron1209 
Your store is password protected provide me 
Store Password.
Thank You.

maron1209
Excursionist
23 0 5

I have sent you the password in a private message.

tafe733
Visitor
1 0 0

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.

Kinjaldavra
Shopify Partner
2302 570 1421

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;
}
}

 

maron1209
Excursionist
23 0 5

Thank you so much!!! It works perfectly!!!

amit25
New Member
4 0 0

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?

 

AryavK
Trailblazer
219 9 29

base.css, style.css or theme.scss.liquid

faith&you