How to show the entire menu in the heading?

Shopify Discussion
1

I am facing an issue with the Menu of the Fabric theme. The problem is that I want the entire menu to be shown on top, however, it shows half of the menu topics and then automatically displays the “More” option. How can I remove the “More” and just have the entire menu list in the header? I want to change it because when you hovering over the “More” and want to selecting something from the bottom it automatically disappears, thus, it does not allow to select any of the menu topics under “More”.

Screenshot 2025-11-03 160751
Screenshot 2025-11-03 1607511891×471 4.68 KB

2

Hi @Marius6

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

This usually happens when your theme has a built-in limit for how many menu items can display before it collapses into the “More” dropdown. You can fix it by increasing or removing that limit in the theme’s header code specifically in the header.liquid or navigation settings under “Main Menu.”

If you’d like, I can guide you on how to safely adjust it so all your menu items show across the top.

4

https://obsession-fashion-women.myshopify.com/

5

yes please! that would be very helpful

6

Can we talk more via e m a il

7

You may choose to select a different header layout.
Obviously, with logo positioned in the centre, theme has to fit the menu in less than half of the screen width…

8

Hi,

Hope this will help

  • Check if Fabric has a built-in toggle (no code)
  • Make the menu fit better (tiny CSS only)
    CSS example
/* Desktop-only tweaks so more items fit on one line */
@media screen and (min-width: 992px) {
  /* Let the inline menu use all space */
  .header__inline-menu,
  .list-menu--inline {
    flex-wrap: nowrap;
  }

  /* Gently tighten spacing so more items fit */
  .list-menu--inline > li > a,
  .list-menu--inline > li > button {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Slightly smaller menu text (adjust if needed) */
  .list-menu--inline > li > a {
    font-size: 15px;
  }
}
  • Allow 2-line desktop menu (no dropdown, all items visible)
  • Turn off the “overflow to More” script
  • Keep dropdowns from disappearing too fast