How to relocate the header in Dawn theme below the image banner?

Solved

How to relocate the header in Dawn theme below the image banner?

inspirea
Shopify Partner
46 0 4

 

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

 

Thanks

Accepted Solutions (2)

premadestores
Shopify Partner
134 15 35

This is an 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)-

premadestores_2-1644212807877.png

 

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 :

premadestores_0-1644212386059.png


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

 Here is my Dawn Theme Looks like :

premadestores_1-1644212600901.png

 

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

 

 

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com

View solution in original post

premadestores
Shopify Partner
134 15 35

This is an accepted solution.

@inspirea 

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

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com

View solution in original post

Replies 18 (18)

RobDukarski
Shopify Partner
88 15 20

@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!

- Rob Dukarski
Helping to make commerce better for everyone!

premadestores
Shopify Partner
134 15 35

This is an 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)-

premadestores_2-1644212807877.png

 

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 :

premadestores_0-1644212386059.png


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

 Here is my Dawn Theme Looks like :

premadestores_1-1644212600901.png

 

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

 

 

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
inspirea
Shopify Partner
46 0 4

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

premadestores
Shopify Partner
134 15 35

@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.

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
inspirea
Shopify Partner
46 0 4

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

inspirea
Shopify Partner
46 0 4

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

 

 

inspirea_0-1644535386516.png

 

premadestores
Shopify Partner
134 15 35

@inspirea 

 

Insert the highlighted code just above the end schema. 

 

as I have shown in the attached image above.

 

 

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
inspirea
Shopify Partner
46 0 4

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
Shopify Partner
134 15 35

This is an accepted solution.

@inspirea 

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

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
premadestores
Shopify Partner
134 15 35

@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.

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
inspirea
Shopify Partner
46 0 4

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
Shopify Partner
46 0 4

 

 

 

@premadestores

 

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

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

 

 

inspirea_0-1644535690648.png

 

 

premadestores
Shopify Partner
134 15 35

Hii @inspirea 

 

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

 

 

If you Want to modify or Customize your theme ,
Hire us | We can help you & guide you how to reach to your potential customers & how to increase brand presence, engagements and sales for your business
Email us: info@premadedropshippingstores.com or check premadedropshippingstores.com
inspirea
Shopify Partner
46 0 4

@premadestores

 

I did remove it....

alli241
Visitor
1 0 0

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

IMG_7103.jpeg

SidekickStreet
New Member
14 0 0

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
Shopify Partner
12321 2551 3715

@inspirea 

Please share your layouts/theme.liquid file code.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
OskarJurevich
Tourist
5 0 1

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!