Solved

Hamburger menu design

Ab52
New Member
36 0 0

Hi everyone,

 

I would like to create a hamburger menu as in my attachment. 3 different sizes, First block has 3 children, second is has 4 children and the third is has 4 children. I’m using the impact theme. Can someone help me? What codes do I need to send? Thank you very much in advance. https://cdn.shopify.com/s/files/1/0818/9296/6737/files/IMG_0435.jpg?v=1712347232

https://cdn.shopify.com/s/files/1/0818/9296/6737/files/IMG_0584.jpg?v=1715363686 

Accepted Solution (1)
AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  #header-sidebar-menu ul li:nth-child(n+1):nth-child(-n+3) {
    font-weight: 800;
    font-size: 24px;
  }

  #header-sidebar-menu ul li:nth-child(n+4):nth-child(-n+7) {
    font-weight: 600;
    font-size: 20px;
  }

  #header-sidebar-menu ul li:nth-child(n+8):nth-child(-n+11) {
    font-weight: 400;
    font-size: 16px;
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 3 (3)

AnneLuo
Shopify Partner
414 84 79

Hello, @Ab52 

Have you created your menu now? Are you just trying to modify the style of the menu? Like a hamburger.

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
AnneLuo
Shopify Partner
414 84 79

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  #header-sidebar-menu ul li:nth-child(n+1):nth-child(-n+3) {
    font-weight: 800;
    font-size: 24px;
  }

  #header-sidebar-menu ul li:nth-child(n+4):nth-child(-n+7) {
    font-weight: 600;
    font-size: 20px;
  }

  #header-sidebar-menu ul li:nth-child(n+8):nth-child(-n+11) {
    font-weight: 400;
    font-size: 16px;
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

BSSTech-Venture
Shopify Expert
229 41 46

Hi

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development