Menu Position in Dawn Theme

Store Design
, , , ,
1

Hi
I’m completely new to Shopify, so please be nice :slightly_smiling_face:
Anyway, my client asked me to design a site that was going to be placed on a server, and now they want the site on Shopify. They like the design and I now have to try an copy it as much as I can.
That said, can the position of the Dawn menu be place under a div that contains the logo, a banner and the icons as shown in the image. I know you can put the logo in the top centre, but I want it to the left and have this banner in the middle where the menu used to be. Is this possible?
Also, can icons be added to the icon row? My client wants a contact support button
Thanks in advance

Screenshot 2025-05-06 at 9.27.41 AM.png
Screenshot 2025-05-06 at 9.27.41 AM.png1354×211 114 KB

GSS

2

Hey @GSS_Social ,

Welcome to Shopify! You’re doing great so far—these kinds of requests are very common when transitioning a design into a Shopify theme like Dawn, and yes, what you want to do is absolutely possible with some theme customization.

Your Goals Recap:

  1. Move the menu navigation under a div that contains:

  • A left-aligned logo

  • A center-aligned banner

  • Right-aligned icons (like cart, account, etc.)

  1. Add a custom icon/button (like “Contact Support”) to the icons row.

Can You Move the Menu Below the Header Row?

Yes! The default layout of Dawn places the main menu (navigation) within the same header block. To move it below your custom top row, you’d need to:

  • Edit the header.liquid file inside your theme.

  • Create a new div structure that wraps:

  • The logo (left)

  • Banner image/text (center)

  • Icons (right)

  • Then move the existing menu (or create a new block for it) below that div.

This might involve:

  • Creating a new Flexbox or Grid layout for the top row

  • Moving the main-menu code block under that layout

Would you like me to generate the Liquid/HTML + CSS code snippet for this layout?

Can You Add Custom Icons to the Header (e.g. “Contact Support”)?

Yes! You can:

Here’s a small example of how to add a “Contact Support” link:


  
  Contact

You can style .custom-support in your CSS (base.css).

Would you like me to walk you through exactly where to put the code for this in Dawn, and how to structure the header layout?

Please feel free to reach out!

Best Regards,

Rajat

Shopify Expert

3

Thanks for that. I will have a go myself, as that is the way to learn, and get back to you.

4

OK, so I managed to do this

Screenshot 2025-05-06 at 3.25.53 PM.png
Screenshot 2025-05-06 at 3.25.53 PM.png1241×221 27.7 KB

But I need the menu in the centre of the page not to the left. I tried loads of things and nothing worked.
Any help?

5

OK, I managed to get the menu layout like this

Screenshot 2025-05-07 at 12.38.11 PM.png
Screenshot 2025-05-07 at 12.38.11 PM.png1366×291 65.5 KB

As it is one of the settings. However, for the life of me I can’t get the menu to centre. Any help?
Also, in-between the logo and the icons I need to add a div container to hold an image

Thanks

Rob

6

Hi @GSS_Social ,

Apologies for the delay in getting back to you. I can take a look at the menu alignment and also add a container between the logo and icons for your image.

Let me know if you’d like me to proceed — happy to assist.Please feel free to reach out me!

Best regards,
Rajat

7

Hi
I managed to get the menu centred, I just need the code to place an image in a div in-between the two top elements.

Rob

8

Just wanted to say I managed to fix the issue I mentioned before.