Fix overhanging border

[kirsten11123]

Hello,

I have removed padding in the header and now it is affecting the border at the end of the menu. The other side border on right seems fine. Can you please see what CSS I need to add to fix this?

https://8nn2yts4ix8zzwy1-71241957534.shopifypreview.com

 

[websensepro]

Hi @kirsten11123 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 990px) {
    body.is-at-top .header.header__nav-items--border .header__utils-items>li:first-child:before{
     display:none !important;
}

    .header__nav-items--border:not(.header--nav-centered) .header__nav-items {
        border-inline-end: unset !important;
        border-inline-end: none !important;
    }
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[kirsten11123]

Sorry I should specify I want the borders to remain (I can turn it off in the settings if I didn't want it - I just want it to not overhang over the heading area.

[websensepro]

Hi @kirsten11123 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header {
    overflow-y: hidden !important;
}

Reuslt:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[kirsten11123]

Thanks, that's great!

[kirsten11123]

Oh no - now the dropdown menu won't show. Any idea how to change?

[topnewyork · Accepted solution]

@kirsten11123,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__nav {
    margin-block: 0px !important;
}

[kirsten11123]

Wonderful, thank you!

[topnewyork]

Hi @kirsten11123,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 990px) {
    .header__nav-items--border:not(.header--nav-centered) .header__nav-items {
        border-inline-end: 0px !important;
        padding-inline-end: var(--spacing-7);
    }
}

@media screen and (min-width: 990px) {
    body.is-at-top .header.header__nav-items--border .header__utils-items>li:first-child:before, body.is-at-top .header.header__nav-items--border:not(.header--nav-centered) .header__nav-items>li:last-child:before, body.is-at-top .header.header__nav-items--border.header--nav-centered .header__logo:before {
        background-color: rgb(254 246 225 / 0%) !important;
        opacity: var(--header-inner-after-opacity);
    }
}

Thanks!

[kirsten11123]

Sorry I should specify I want the borders to remain (I can turn it off in the settings if I didn't want it - I just want it to not overhang over the heading area. 

[topnewyork]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__nav {
    margin-block: 0px !important;
}