How to make two menus on mobile appear the same as desktop view menu.

[jencdo]

Hi everyone, 

Not sure if anyone can help me. I've attached both my mobile and desktop screen here. How can I make my mobile view appear the same as my desktop view? Currently, my menu looks too big on my phone and the other menu is in the box. The font looks too big as well in my mobile. I'm hoping to have both menu in my phone in straight line like the desktop if possible. Thanks! 

[jencdo]

My site url: 

Jennylyn Collection

[theycallmemakka]

Hi @jencdo ,

The header on the mobile is too big to fit on a straight line, unless we make it scrollable. This this is what you want to achieve.

<style>

@media only screen and (max-width: 900px) {
  .shopify-section-group-header-group ul.list-menu.list-menu--inline {
        display: inline-flex!important;
        flex-wrap: nowrap!important;
        position: revert!important;
        align-items: center!important;
        justify-content: flex-start!important;
    }    
    .shopify-section-group-header-group .menu-top-center {
        overflow: auto!important;
    }    
    .shopify-section-group-header-group .menu-top-center li {
        min-width: fit-content!important;
    }    
    .shopify-section-group-header-group .header__menu-item span {
        margin: 0.5rem!important;
        font-size: 15px!important;
    }
}
</style>

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

Step 2: Search for "theme.liquid"

Step 3: Add the CSS above "</head>"

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Mangit

[swapnilgupta]

Hi @theycallmemakka 

My website URL : www.babyworksbyswapnil.com

Can you PLEASE PLEASE help me achieve the same thing ?

I want my website's mobile version to have Header menu like desktop version ( IN ONE SINGLE ROW instead of Hamburger View )

I would really be obliged if you could help me!

Thanks in advance

[IntechCarl]

Hi! Can I do this to my website also?

Store URL: thecleanroom.net