fix header asap for launch

Store Design
, , , , , , , ,

Topic summary

A user needs urgent header modifications before their store launch using the Dawn theme. They want to:

Mobile changes:

  • Hide search icon and burger menu
  • Move logo to the left
  • Move button to the right

Desktop changes:

  • Create full-width layout
  • Position logo on far left
  • Position button on far right

A solution was provided using Custom CSS code that:

  • Hides header icons completely
  • Removes the header drawer (burger menu) on mobile
  • Adjusts grid layout to reposition logo and navigation
  • Uses media queries for responsive behavior

The responder included screenshots demonstrating the results on both desktop and mobile views. The issue appears resolved with the CSS implementation, though no confirmation from the original poster has been provided yet.

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

Luxurymrkt_0-1736383372893.jpeg
Luxurymrkt_0-1736383372893.jpeg185×400 9.03 KB

hi,

I want to hide the search icon and burger menu on both mobile and desktop. I’d like to move the logo to the left and button to the right on mobile.

on desktop I’d like to make it full width sk logo all the way on left and button on right.

my site is https://eftfkw-vc.myshopify.com

im using Dawn theme*

Thank You | mike

2

Hi @Luxurymrkt

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.header__icons {
    display: none !important;
}
@media screen and (max-width: 768px){
header-drawer {
    display: none !important;
}
header.header {
    grid-template-areas:
        "heading navigation" !important;
}
nav.header__inline-menu {
    margin-left: auto !important;
}
}

Here is the result:

image_720.png
image_720.png720×426 21.5 KB

image_480.png
image_480.png271×480 22 KB

I hope this helps

Best,

Daisy

1 Like