How can I customize the header on my Dawn theme?

[Prarthana]

hi,

my store url is - https://embrfragrance.com/

password- aoleeb

I want my logo to be on the extreme left and the menu and cart to be on extreme right just like the picture I have attached.

can you please help??

[NomtechSolution]

use this code

.password-header {
max-width: 2500px !important
}

[Made4uo-Ribe]

Hi @Prarthana ,

I understand that you want to I want the logo to be on the extreme left and the menu and cart to be on extreme right just like the picture I have attached.

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 “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
4. At the bottom of the file, add the following CSS code:
5. And Save.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    padding-left: 0px;
    padding-right: 0px;
}

• Result:

• 

  I hope it help.

[Prarthana]

this didn’t work.

[Prarthana]

this didn’t work

[Made4uo-Ribe]

Hi @Prarthana ,

As what Ive seen in your website now, the padding was remove. But I think you want more to move far? Just clarification do you want to remove the icons(search and cart) as same showed your sample image?

[Prarthana]

no. I don’t want to remove the cart.

see the picture how I want it to be. please help!

[Ujjaval]

@Prarthana add below css base.css file

@media (min-width:768px)
{
.gradient {
    position: absolute !important;
    height: 80px !important;
}
.header .header__heading-link {
    position: absolute !important;
    left: 2px !important;
    top: 20px !important;
}
.header--middle-left .header__inline-menu {
    position: absolute !important;
    right: 10% !important;
    top: 20px !important;
}
.header__icons {
    position: absolute !important;
    right: 2% !important;
    top: 20px !important;
}
}

[Made4uo-Ribe]

Hi @Prarthana ,

You can try this one. Same instruction copy and paste in your theme.css file.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    max-width: 98%;
    display: flex;
    justify-content: space-between;
}
nav.header__inline-menu {
    position: absolute;
    left: 35%;
}

i hope it help.

[Prarthana]

Hi Rose!

It seems to work only for MacBook Air screen size. but when I see in an iMac or bigger screen, the menu becomes far from the cart again. :((((( see image

[Made4uo-Ribe]

We can put a media queries for that. This one.

@media only screen and(max-width: 1920px){
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    max-width: 98%;
    display: flex;
    justify-content: space-between;
}
nav.header__inline-menu {
    position: absolute;
    left: 35%;
}
}

I hope this one help.

[Prarthana]

but this is the same media query as the last one. didn’t really work

[Made4uo-Ribe]

Hi,

Can you change some code. Instead of position absolute change into position:relative.

nav.header__inline-menu {
    position: relative;
    left: 15%;
}

and I change a bit the left position.

Result:

[Prarthana]

thank you so much!!!

[Made4uo-Ribe]

It seems it work well. Happy to help.