alignment header

[Ruud-OPS]

Hi,

Hope someone can guide me true a mistake i made somewhere and cant find the fix so far.

My menu and logo are aligned to the far left and the search bar, login and shopping cart to the right. I would like to have them back in the “box” like the rest of the page is aligned in the “centre”. Were or how can I make the adjustments?

Thanks for helping out!

[topnewyork]

Hello, @Ruud-OPS
Please share “Store URL”
Thanks!

[LizHoang]

Hi @Ruud-OPS

Can you share with me the store URL to check on it for you?

Thank you

[Ruud-OPS]

https://zhsoggv1x5xhgiwz-92379545941.shopifypreview.com

here you go!

[Ruud-OPS]

Here you go!

https://zhsoggv1x5xhgiwz-92379545941.shopifypreview.com

[DaisyVo]

Hi @Ruud-OPS ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

header.header {
    max-width: 116rem !important;
}

Here is the result:

If you want to add a bar below, you can add this code:

.page-width.utility-bar__grid {
    max-width: 116rem !important;
}

Here is the result for this:

Please let me know if it works!

Best,

Daisy

[LizHoang]

Hi @Ruud-OPS

you can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (min-width: 750px) {
    .header,
    body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
        max-width: var(--page-width) !important;
        padding: 0 5rem !important;
    }
}

[topnewyork]

Hello, @Ruud-OPS

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

.utility-bar__grid .list-social {
    justify-content: center !important;
    align-content: center !important;
}

Thanks!

[Ruud-OPS]

Hi Daisy!

Thanks for the sollutions. The first one worked like a charm! The second one needed a little adjustment and worked! Thanks for helping out!

.utility-bar__grid {
max-width: 116rem !important;
}