Align wishlist icon on header and make hero section full width - Dawn theme

[Dekanten]

Hi

I want to align the wishlist icon on the page and make the hero section full with, can this be possible in a simple way? Thank you in advance. 🙂

www.dekanten.no

See attached image:

[BSSCommerce-B2B · Accepted solution]

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before </body>

<style>
.header__icon.st-wishlist-details-button {
  align-items: start!important;
  margin-top: 5px!important;
}
</style>

Result:

[BSSCommerce-HDL · Accepted solution]

Hi @Dekanten, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a.header__icon svg {
    margin-bottom: 0 !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Tech_Coding · Accepted solution]

Hello @Dekanten 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .header__icons .icon {
       margin-bottom: 0 !important;
    }  
   #shopify-block-easy_content_builder_section_title_GgnwY7 .container-inner.uk-align-center{
       max-width: 100% !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL · Accepted solution]

Hi @Dekanten, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-block-easy_content_builder_section_title_GgnwY7 .container-inner {
    max-width: 100% !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[BSSCommerce-B2B · Accepted solution]

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before </body>

<style>
.header__icon.st-wishlist-details-button {
  align-items: start!important;
  margin-top: 5px!important;
}
</style>

Result:

[Dekanten]

This works like a charm so everything is just fine now, glad to make this working out with help from both of you. 🙂

[BSSCommerce-B2B]

@Dekanten , try this code to help you remove the white gap field

<style>
.shopify-section-header-hidden {
    transform: translateY(0) !important;
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @Dekanten, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a.header__icon svg {
    margin-bottom: 0 !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Dekanten]

Thank you guys this works like a charm and really glad for that. Big thumbs up there to both of you. 🙂

Can you also help me with the hero section width please, its look aweful on large screens. 🙂 Thanks again. 🙂

[BSSCommerce-HDL · Accepted solution]

Hi @Dekanten, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
div#shopify-block-easy_content_builder_section_title_GgnwY7 .container-inner {
    max-width: 100% !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[Tech_Coding · Accepted solution]

Hello @Dekanten 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .header__icons .icon {
       margin-bottom: 0 !important;
    }  
   #shopify-block-easy_content_builder_section_title_GgnwY7 .container-inner.uk-align-center{
       max-width: 100% !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Dekanten]

Hi to you, and this works flawless and really glad too see the final result, everything is so clean and nice. You guys are awesome. Masters on top levels. 🙂 Big thumbs and thanks again you miracleguys. 🙂

[Dekanten]

While trying this code i have a white gap field between header menu and hero section, any methood to make this section working without gap? 🙂

[Tech_Coding]

can you please share screenshot?

[Dekanten]

Here is the gap and this arrives while scrolling slow, its open a white space between these sections. The menuheader dissappear, strange behaviour actually. Hope there is a fix. 🙂

[BSSCommerce-HDL · Accepted solution]

Hi @Dekanten, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.shopify-section-header-hidden {
    transform: translateY(0) !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Dekanten]

Thank u so much my dear friend, this is flawless and all things works like a charm. This is amazing, thank you very much indeed. 😀

[BSSCommerce-HDL]

@Dekanten, No problem. Glad to help you 😍 

[Tech_Coding]

sorry for late reply @Dekanten ... I was busy with some urgent work..I saw that your problem is solved by @BSSCommerce-HDL Thank you so much.