Change the color of the navigation menu in Header Trade Theme

Technical Q&A
,
1

I want to change the color of the navigation menu in header. I want to make it to full length of the screen .
I have created this with this code :
header.header.header–top-center.page-width.header–has-menu
nav.header__inline-menu {
background: #eeeeee;
width: 100%;
text-align: center;
}
.header__inline-menu .header__menu-item span {
color: black !important;
}
@media (min-width: 750px) {
.list-menu–inline > * + * {
margin-left: 20px;
}
}

MushSon_0-1730216748433.png
MushSon_0-1730216748433.png1349×119 16.1 KB

2

Hi @MushSon

Please, share your store URL. Thanks!

3

Here is the link
https://d50kj3-fa.myshopify.com/
password: beitto

I somehow managed to make it full width with this //code:

.header.page-width {
max-width: 100% !important;
padding: 0 0px !important;
}

and also modify the Shopping Bag icon with the cart Icon svg, but the cart icon isn’t aligned and slightly up relevant to menu items. How can I do that? Let me know how can I aligned the Cart icon.

4

Add this code then,

a#cart-icon-bubble svg {
    margin-top: 20px;
}

header-drawer {
    margin-left: 0;
}

And Save.

Result:

Made4uoRibe_0-1730295237111.png
Made4uoRibe_0-1730295237111.png711×193 22.9 KB

I also fix the menu drawer.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

Thanks, It worked. But when I open another page like About Us and during page-load the header is in previous styling. Please check the attached video and then my header will be completed.