How to adjust the drop down menu bars in the header (Dawn Theme)

Store Design
, , ,

Topic summary

A user seeks to adjust the positioning and spacing of dropdown menu bars in the mobile header of their Shopify store using the Dawn theme.

Initial Solution:

  • A helper provided code to modify the icon-hamburger.liquid file
  • The code successfully addressed the initial spacing concern

Follow-up Adjustments:

  • The user requested fine-tuning of the menu position (left/right, up/down)
  • Additional CSS was provided to adjust margins and dimensions using the .cst-icn class
  • Suggested using margin-right property with customizable pixel values for positioning

Current Issue:

  • The most recent code modification causes the mobile header to disappear entirely
  • The discussion remains unresolved as the user awaits a working solution

The conversation involves sharing store credentials and iterative CSS adjustments, with the helper offering to make custom positioning tweaks based on the user’s preferences.

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

Thanks in advance!

I am looking to make the drop down menu bars look closer together and adjust their positioning for the mobile version.

How my mobile version site looks:

IMG_0370.jpg
IMG_0370.jpg354×227 2.94 KB

How I want it to look:

IMG_0371.jpg
IMG_0371.jpg312×312 4.04 KB

Ignore the bottom part of the images

2

Hello @MMast

follow the steps

Go-to Online Store>Themes>Edit code

Open find icon-hamburger.liquid

replace the existing code with

deepaksharma_0-1710020077003.png
deepaksharma_0-1710020077003.png1323×663 30.1 KB

Save the file and enjoy

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

3

Thank you! Is there any way of adjusting how far left,right/up,down you can go?

4

yes just give me your reference I will adjust it for ya

5

The code you gave me was good I’m just picky haha. If you could move it to the left a couple notches if you have any extra free time that would be awesome!

6

Sorry for being late reply, just give me your store url and password if any

7

Sorry for my late response as well.

https://decemberschild.com/

password: dc

8

Hi there

you see the code

.cst-icn {
    height: 3rem !important;
    width: 3rem !important;
}

replace that with this one

.cst-icn {
    height: 3rem !important;
    width: 3rem !important;
    margin-right: 25px !important;/* You can adjust*/
}

just add margin-right you can adjust the px according top your liking

9

Whenever I replaced the code to the one you just provided it deletes my header on the mobile version.