How can I make my desktop menu identical on mobile?

NSShoreham · ‎03-01-2024

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

ThePrimeWeb · ‎03-01-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

NSShoreham · ‎03-01-2024

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.

ainezall · ‎06-06-2024

Hey, thank you, it's working! But my logo change place and menu scrolled down (SHOP). How to fix that?

How can I make my desktop menu identical on mobile?

How can I make my desktop menu identical on mobile?

☕Buy me a coffee☕

Community Blog Articles