Change menu bar background color

[user7777]

Hi, guys!

Can anyone please help me change menu bar background color to blue and make it full width?

Here is the page - https://xf06k0-hr.myshopify.com/?pb=0

Password: 123

Adding picture to understand the idea.

Thanks a lot! 🙂

[Moeed · Accepted solution]

Hey @user7777 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
ul.list-menu.list-menu--inline {
    width: 100% !important;
}
nav.header__inline-menu * {
    background: #657D9F !important;
    color: white !important;
}
nav.header__inline-menu {
    width: 100% !important;
}
header {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.header__icons {
    padding-right: 5rem !important;
}
details-modal.header__search {
    padding-left: 5rem !important;
}
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[user7777]

Hi!

Thank you!

It didn't work when I added the code in password.liquid file, BUT it did work when I added it above body tag on theme.liquid file.

Can I keep the code in theme.liquid file above body tag? It will not mess anything?

Thanks a lot for your help!

[Moeed]

Oh my bad! Yes you were supposed to add it in theme.liquid. 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.

Best,

Moeed

[user7777]

Thanks a lot 🙂