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?
Topic summary
A user removed padding from their Shopify store header, causing a navigation menu border to overhang beyond the header area. The left border extended too far while the right border appeared correct.
Initial Solutions Offered:
- Two developers provided CSS code to hide or remove the borders entirely
- User clarified they wanted to keep the borders visible but prevent the overhang
Working Solution:
A CSS fix was provided to adjust the header navigation margin:
.header__nav {
margin-block: 0px !important;
}
Follow-up Issue:
The initial fix caused dropdown menus to stop displaying. The same CSS code was reapplied (possibly with adjustments to the implementation method), which resolved both the border overhang and dropdown functionality.
Status: Resolved. The user confirmed the final solution worked correctly, maintaining visible borders without overhang while preserving dropdown menu functionality.
- Go to Online Store → Theme → Edit code.
- 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!
Hi @kirsten11123 ,
- Go to Online Store → Theme → Edit code.
- 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!
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.
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.
- Go to Online Store → Theme → Edit code.
- 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!
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
.header__nav {
margin-block: 0px !important;
}
1 Like
Thanks, that’s great!
Oh no - now the dropdown menu won’t show. Any idea how to change?
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
.header__nav {
margin-block: 0px !important;
}
Wonderful, thank you!