Problem with centering content within header (Dawn theme)

[manbru]

Hey,

I’ve been having this problem with my header that i can’t make the content in it be centered, and especially that it stays centered on a larger/smaller laptop/monitor screens. It should be centered but it’s not.

my store: https://r1vex.myshopify.com/

I would appreciate your help!

Right now:

The result i want:

[Rahul_dhiman]

Hello @manbru

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this at the end of the file.

@media screen and (min-width: 990px) {
    .header:not(.drawer-menu).page-width {
        padding-left: 33rem !important;       
    }
}

@media screen and (min-width: 990px) {
    .header:not(.drawer-menu).page-width {
        padding-left: 37rem !important;
       
    }
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Made4uo-Ribe]

Hi @manbru

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--top-center.header--mobile-center.page-width {
    max-width: 100%;
}

• And Save.
• Result:
• 

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

[Sweans]

Hi @manbru ,

You can center the header with a single line of css.

Please check it here:

.header.header--top-center {
max-width: 100% !important;
}

Result:

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[oscprofessional]

Hello @urv

Go to your Shopify admin panel.
Click on “Online Store” and then “Themes.”
Find the theme you want to edit, click on “Actions,” and then select “Edit Code.”

Locate the assets/base.css file:
And Add These at the bottom of this file

.section-header sticky-header .header {
	max-width: 100%;
}

I hope this solution meets our needs.
Thank you!!

[BSS-TekLabs]

• Here is the solution for you
• Please follow these steps:

• Then find the base.css file.

.header:not(.drawer-menu).page-width {
        width: 100% !important;
    }

• Then add the following code at the end of the file and press ‘Save’ to save it.

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[manbru]

Thanks a lot man!