Dawn theme header customization questions

Store Design
, ,
1

Hello, I am having problems customizing the header of the Dawn theme.

  1. I need the announcement bar with full width, all red background, no white background on the sides
  2. The menu center aligned, but the logo aligned to the left
  3. Removing the icons to the right: no magnifying glass nor shopping cart

This is what I appended on the file base.css, but it still doesn’t work:

.announcement-bar__message {
width: 100%;
max-width: 100%;
color: white !important;
background-color: #7A0000;
}

.header {
width: 100%;
max-width: 100%;
align-content: center !important;
text-align: center !important;
}

Here is a screenshot of the website:

dawn.png
dawn.png1920×850 137 KB

2

Hello,

  1. The announcement bar worked

  2. The menu align to the center worked

  3. The icons part didn’t work but I achieved to make this work:

.header__icons {
display: none;
}

  1. The logo align to the left did not work. I tried using this code, because of the name I see on the google chrome inspect tool from screenshot 3 but it still doesn’t work:

.header__heading {
text-align: left;
}

I think the problem is that what is highlighted on screenshot 2 doesn’t have full width despite me putting this code:

.header-wrapper {
width: 100%;
max-width: 100%;
}

I removed all my previous appended code and here is the new appended code and, after that, 3 screenshots:

.announcement-bar {
background-color: #7A0000;
padding: 10px 0;
}

.announcement-bar__inner {
max-width: 100%;
}

.announcement-bar__message {
color: white;
}

.header__heading {
text-align: left;
}

.header-wrapper {
width: 100%;
max-width: 100%;
}

.main-nav {
text-align: center;
}

.header__icons {
display: none;
}

dawn2.png
dawn2.png1900×863 139 KB

dawn3.png
dawn3.png1920×868 173 KB

dawn4.png
dawn4.png1920×872 170 KB

3

Hi @tonegawa
We’re BSS Commerce - Shopify Partners & Experts providing Shopify apps and Store Development on Shopify & Shopify Plus.
We saw that you need to Header Customization in Dawn theme. It’s what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.
We will check it and give you a detailed solution. We’re looking forward to working with you.