Desktop menu alignment HELP!

Shopify Discussion
,

Topic summary

A user reports a desktop menu alignment issue in Shopify’s Savor theme where the navigation menu shifts out of alignment and hides the hamburger menu icon. A screenshot shows the visual problem.

Proposed Solutions:

Three different CSS/code fixes have been suggested:

  • Solution 1: Add CSS to base.css or theme.css to control flex-wrap and prevent overflow on .header__inline-menu and .site-header__icons

  • Solution 2: Insert a custom JavaScript snippet in the Footer section that forces the menu to reflow on page load by dispatching a custom event to the overflow-list component

  • Solution 3: Add CSS to Theme settings > Custom CSS to force display the desktop drawer menu using !important

The root cause appears to be long menu item names that don’t fit properly in the desktop layout, combined with the theme not automatically reflowing the navigation when needed. The discussion remains open with no confirmed resolution yet.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Very strange, but my menu on desktop changes out of alignment and hides the burger, video attached. any help would be appreciated or has anyone expereienced the same, new Savor theme

Thanks

Screenshot 2025-08-01 at 09.03.37
Screenshot 2025-08-01 at 09.03.371920×529 73.8 KB

2

Hi @DASCPA,

Please send the website link, I will check it for you

3

Hi @DASCPA ,
Go to Online Store → Themes → edit code → base.css or theme.css
paste this code at end

.header__inline-menu {
  flex-wrap: wrap;
  overflow: hidden;
}
.site-header__icons {
  flex-shrink: 0;
}

If I was able to give you solution, please don’t forget to like and mark it as the solution.

Thanks
Manoj

4

thanks you luxe-raffles.com

5

Initially, the menu is shown as desktop version, and since your menu items are long, they do not fit properly.

Looks like the theme does not reflow the menu when necessary, so we may try to force it.

In Customizer, add a “Custom liquid” into the Footer section group and paste this code:

<script>
requestAnimationFrame(() => { 
  document.querySelector('nav overflow-list')?.dispatchEvent(
      new CustomEvent(
        'reflow', 
        { detail: { lastVisibleElement: false } } 
      )
    ); 
})
</script>
6

Hi @DASCPA,

Please go to Customize > Theme settings > Custom CSS and add code:

.header__drawer.desktop\:hidden {
    display: flex !important;
}

If I helped you, then a Like would be truly appreciated.