How do you move header in Dawn theme?

[inspirea]

Is there a way to move the header so its below the image banner instead of above it?

Thanks

[premadestores · Accepted solution]

Hello, @inspirea 

Welcome to the Shopify community!
Thanks for your good question.

Step 1 : Go To Online Store -> Actions -> Edit Code
In Layout Folder -> theme.liquid

find code {% section 'header' %} .

simply just remove this line of code .  (To make your header dynamically add and drag easily where you want)-

Step 2 :
Now go to Sections Folders-> find header.liquid,
just paste the below code at the bottom of the page :
  ,
"presets": [
{
"name": "Header"
}
]

(don't forget to insert comma otherwise it will give error)
.  just like the attached file :

Solution :
Now you can add header from customize section and drag whereEver you want to insert.

 Here is my Dawn Theme Looks like :

If this post is helpful for you kindly like and accept this as a solution.
Thankyou!

[RobDukarski]

@inspirea 

In your "layouts/theme.liquid" file you will want to hard-code in an image banner section directly above the header section code. You should be able to copy-and-paste the section line and replace the name with the other section's name.

You may also want to make sure that the template is the "index" template so that it only shows on the homepage that way if that's what you want.

Something like this:

{% if template == 'index' %}
  {% section 'image-banner' %}
{% endif %}
{% section 'header' %}

Hope that helps!

[premadestores · Accepted solution]

Hello, @inspirea 

Welcome to the Shopify community!
Thanks for your good question.

Step 1 : Go To Online Store -> Actions -> Edit Code
In Layout Folder -> theme.liquid

find code {% section 'header' %} .

simply just remove this line of code .  (To make your header dynamically add and drag easily where you want)-

Step 2 :
Now go to Sections Folders-> find header.liquid,
just paste the below code at the bottom of the page :
  ,
"presets": [
{
"name": "Header"
}
]

(don't forget to insert comma otherwise it will give error)
.  just like the attached file :

Solution :
Now you can add header from customize section and drag whereEver you want to insert.

 Here is my Dawn Theme Looks like :

If this post is helpful for you kindly like and accept this as a solution.
Thankyou!

[inspirea]

Ok I did all that but my header has disappeared now...

[premadestores]

@inspirea 

after applying the code, header should be in add section option , and you can easily drag and adjust it's position where you want.

Kindly like and accept if this solution is helpful.

[inspirea]

When I click the "add section" there is nothing listed for header....

[inspirea]

Here is how the code looks... is this correct?

[premadestores]

@inspirea 

Insert the highlighted code just above the end schema. 

as I have shown in the attached image above.

[inspirea]

yes that worked. I knew I as missing something. Thank you!

I have another question... how can I change the color of the navigation font in the header section?

[premadestores · Accepted solution]

@inspirea 

Glad that it worked! Kindly like and accept the solution please!

[premadestores]

@inspirea 

For changing the color of na bar :

1. Go to Online Store > Themes > Actions > click Edit code > click Assets > select theme.scss.liquid.
2. Look for a part of the file that looks like .site-nav--dropdown { background-color: white; } (Or whatever you want the color).

If this post is helpful for you Kindly Like and Accept this as a solution.

[inspirea]

Actually not the bar.... just change the color of the navigation fonts...

including the color of the when you are on a particular page?  

[inspirea]

@premadestores

When I click the "add section" there is nothing listed for header....

Here is how the code looks... is this correct?

[premadestores]

Hii @inspirea 

Do remove  {% section 'header' %}  line of code in theme.liquid file, then your header show in add section .

[inspirea]

@premadestores

I did remove it....

[alli241]

Hello I tried following the steps but I do not see section header I only see section header group 

5.72 MB of 6.2 MB

 

[SidekickStreet]

Okay... Following this as well... not sure how to get the final step to work... I cannot find a way to add a header back in again after it disappears because of the fist step...

[dmwwebartisan]

@inspirea 

Please share your layouts/theme.liquid file code.

Thanks!

[OskarJurevich]

Hi there,

I have the same here:

https://8d624b-3.myshopify.com

Here You go what I mean👇🏻

https://we.tl/t-tmU3yuMVyS

Thanks in advance!