Menu Bar Background Color

Store Design
, ,
1

Hi, I’m trying to change the background colour of the menu bar. I’ve managed to edit the CSS so the menu has the background, but how can I make this expand the full width of the page like the top header?

Thank you.

Screenshot 2025-12-23 at 14.31.15
Screenshot 2025-12-23 at 14.31.153342×1652 232 KB

2

If you send a link to your store, I can give you the right CSS.

3

Hey @user4152

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

URL: https://hjif0h-1n.myshopify.com

password: chaube

Thank you

5

Hey @user4152

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 </ body> tag
<style>
nav.header__inline-menu {
    width: 100% !important;
    background: #358886 !important;
}
ul.list-menu.list-menu--inline {
    width: 100% !important;
}
.header {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
details-modal.header__search {
    padding-left: 3.2rem !important;
}
.header__icons.header__icons--localization.header-localization {
    padding-right: 3.2rem !important;
}
</style>

RESULT:

image
image1797×900 61.6 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

That’s great thank you. There’s a bit missing from each end, do you know if it’s possible to get the background right to the end of the screen? Thank you

Screenshot 2025-12-23 at 14.46.21
Screenshot 2025-12-23 at 14.46.213334×1654 225 KB

7

I have updated my code in the above reply, remove the current code you added and add the updated code mentioned above.

8

Hello,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file

In theme.liquid, paste the below code before

badge-list.badge-list.badge-list–vertical sold-out-badge.badge.badge–sold-out {
height: 100% !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(200, 200, 200, 0.7) !important;
font-weight: bold !important;
text-transform: uppercase;
}

badge-list.badge-list.badge-list–vertical:has(sold-out-badge.badge.badge–sold-out) {
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
}

Thanks!

9

Thank you that’s perfect!

10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.