How can I adjust the position and size of my hamburger menu icon in the Dawn theme?

Store Design
,
1

Hello,

My website is: https://agroen.be/

My questions are about the header. I managed to put a hamburger menu (dawn theme) with custom code:

@media screen and (min-width: 990px) {
header-drawer { display: block !important;}
.header--middle-left .header__inline-menu { margin-left: 0; display: none !important;}
.header__heading, .header__heading-link { justify-self: center !important; grid-area: initial !important;}
}
.header {
display: grid;
grid-template-areas: 'left-icon heading icons';
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}

I would like the hamburger menu icon to be on the far right (and not the far left).
I would like the logo to be far left.

And finally I would like the padding on the header to be smaller (so I want the header height reduced).

Can someone please help me? Thanks in advance. :slightly_smiling_face:

1 Like
2

Hello @synqshot ,

This design from the theme

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1669358184824.png
GemPages_0-1669358184824.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1669358226426.png
GemPages_1-1669358226426.png1637×907 66.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

3

Where did you add the custom code? base.css?

I added it there and it didn’t work for me. Any help?

4

Hi, this moves the hamburger icon to the right, however the menu still opens on the left side. Any way to change this? Thanks :slightly_smiling_face: