How to move my bottom menu to hamburger menu in header?

Technical Q&A

Topic summary

A user is experiencing an issue where their bottom-positioned menu overlaps with the chat widget and ‘back to top’ button on their Shopify site (fabvit.com). They want to relocate this menu to the header as a hamburger menu next to the logo.

Proposed Solution:

  • Add CSS code to the theme’s stylesheet (theme.scss.css)
  • The suggested fix involves adding position:relative!important; to .site-nav__thumb-menu

Current Status:
The discussion appears to have a potential solution offered, but no confirmation yet on whether it resolved the issue. The user shared a code snippet they believe needs modification, which references a mobile menu style condition.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I have used a theme where the menu is at the bottom and overlapping my chat and ‘back to up’ button. Now I want to move my menu back to the top, next to my logo as hamburger. Anyone knows how to do this?

www.fabvit.com

I think I need to change this code somehow:

{% if mobile_menu_style == 'thumb' %}
    {%- if main_menu != blank -%}
      
        

        
          
            {%- if settings.cart_icon == 'cart' -%}
              
            {%- else -%}
              
            {%- endif -%}
            {{ 'layout.cart.title' | t }}
            
              
                {{ cart.item_count }}
              
            
          
        
      

    {%- endif -%}
  {% endif %}
2

hi @Rmhdw

May this help you.

you can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.scss.css>Add this code at the bottom.

.site-nav__thumb-menu {
 position:relative!important;
}

you can see the change

SideNode_0-1695031185151.png
SideNode_0-1695031185151.png737×545 106 KB

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

1 Like