Replicate Desktop menu view on mobile

NSShoreham
Not applicable
2 0 0

Hello!

 

Can anyone help me replicate my desktop menu on mobile, please? I want it to look the same on all devices, if possible. I've searched for an answer but can't find anything specific to this. Maybe it's not possible. 

 

Theme: Taste

URL www.neighbourhoodstore.co.uk

Many thanks,

NS 

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1795 507 377

Hey @NSShoreham,

 

I don't really recommend it, but you can try it and see if it usable in mobile, then you can decide to keep it. 

Normally desktop menu's and mobile menu's are different because desktop's have space that mobile's don't. So a mobile menu is crafted in a way that works well for mobile. 

 

But you have the option to try.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.header__inline-menu {
    display: block !important;
    grid-column-start: 1 !important;
}

.header__inline-menu * {
    font-size: 15px !important;
}

header.header.header--top-left.header--mobile-left.page-width.header--has-menu.header--has-account {
    grid-template-columns: auto !important;
}

.header__icons.header__icons--localization.header-localization {
    grid-column: 4 !important;
}

header-drawer {
    display: none !important;
}

h1.header__heading {
    grid-column-start: 1 !important;
}

h1.header__heading a {
    padding-left: 0 !important;
}

.header__menu-item.list-menu__item.link.link--text.focus-inset,
summary.list-menu__item {
    padding: 5px 15px !important;
}

ul.mega-menu__list.page-width {
    grid-template-columns: repeat(2, 1fr) !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709298776767.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
NSShoreham
Not applicable
2 0 0

Hi ThePrimeWeb,

 

Wow! Thanks! I had a go and it kinda worked! I thought it would have some issues as you mentioned above, but it was very close to what I was looking for. It didn't cope well with the mega menu at all.  Switched to drop down which was better but the font sizes were all over the place.  Needs a smaller font size in the drop down for it to work. Anyway, I've rolled it back to the previous version and I'll have a play with it.