Dawn theme header : logo, menu and cart icons alignment change

[RaghavGoel1]

This is how the current header looks like: -

Link : https://f40566-d3.myshopify.com/

This is how i want the header to look like :-

Link : https://www.bartisans.in/

Please help with this as i am not able to make it responsive with screen sizes.

[Moeed]

Hey @RaghavGoel1

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aBox_Agency]

Hello Raghav,

Your site doesn’t use the container for the section or Layout.
If you need the full-width header or other sections you can set the page width to max as you want.

Or If you want to set it with the premium theme - let me know I set it for you with all other settings.

Thank You

[Made4uo-Ribe]

Hi @RaghavGoel1

check this one.

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

header.header.header--middle-left.header--mobile-center.page-width {
    max-width: 90%;
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[RaghavGoel1]

Hey yes, this seems to be an issue. Is there a quick way to allow the header to use the full width of the screen?

[RaghavGoel1]

Hey, thanks for your solution but unfortunately this didn’t seem to work. I basically want my logo to move left and the icons on the right to move more right to eliminate the extra space.

And ofcourse this should be responsive to screen sizes. Thanks

[Made4uo-Ribe]

Oh, i thought you like same on the sample website you share not that much more to sides.

header.header.header--middle-left.header--mobile-center.page-width {
    max-width: 100% !important;
}

And Save.

Result:

You can check on this again. Thanks.

It will automatic add to mobile screen as well.

[aBox_Agency]

Yes, That’s Perfect.

[RaghavGoel1]

Thanks for the quick response, however, the problem still persists.

Extra indent on both the sides

[Dan-From-Ryviu]

Hi @RaghavGoel1

Please add this code to your Custom CSS in Online Store > Themes > Customize > Theme Settings

.header.page-width { max-width: 1600px !important; }

[RaghavGoel1]

Thanks Dan, this solved it! Have a good day

[Dan-From-Ryviu]

Very welcome!