Making Changes to Header

[hollypie002]

Hi! Happy New Year!

I'm currently in the process of trying to convert my website from a third-party theme to Shopify's Dawn theme. I am trying to recreate my old header design but struggling to achieve some of the same results. 

1. Social Media Circular icons 

2. Two-toned header (baby blue behind the logo and white behind the menu)

3. Make the menu font pink, larger, semi-bold and better spacing

Any advice would be appreciated!

Goal =

Current =

[Hasan112]

Need to be coding & changes.  

[DaisyVo]

Hi @hollypie002 

Could you please share with us the store link so we can provide you with a suitable solution?

Thank you!

Best,

Daisy - Avada Support Team 

[hollypie002]

Hi Daisy! Yes of course, it's patchandstick.com

The rest of the website isn't finished so ignore that state of it 😂 

Thank you!

[DaisyVo]

Hi @hollypie002 

It seems you completed this task. Not sure if there is anything else that we can help you with?

Best,
Daisy - Avada Support Team.

[Made4uo-Ribe]

Hi @hollypie002 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 990px) {
header.header {
    max-width: 100%;
    padding: 0;
}

ul.list-menu.list-menu--inline {
    align-self: center;
    justify-self: center;
}

nav.header__inline-menu {
    display: flex;
    justify-content: center;
    background: white;
}

.header:not(.drawer-menu).page-width {
        padding:0;
}


h1.header__heading {
    padding-top: 20px;
}

details-modal.header__search {
    padding-left: 5rem;
}

.header__icons.header__icons--localization.header-localization {
    padding-right: 5rem;
}


nav.header__inline-menu span, .header__menu-item .icon-caret {
    color: #ed78af;
}
}
</style>

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!