How can I add a colored background to my menu bar and change text colors?

How can I add a colored background to my menu bar and change text colors?

liemanco
New Member
7 0 0

Hi there, I was hoping for my website to look like this green website design below. Specifically, the menu bar and sub menu look where the subheading text are in a different colour. 

 

I would also like my main menu bar to be in colour #99B9BC and text to be in white colour. What kind of code can I add to make menu bar have a background, subheading text to be#99B9BC and in bold font? Other text to be regular font thickness. 

 

I hope I'm not asking too much! I'm truly desperate, I've tried many codes from other forums but have been unsuccessful. website: https://dc78c8-3.myshopify.com/products/first-trip-around-sun-birthday-vinyl-decal

 

You can hover over menu ^^^

 

Thank you so so much!

Screen Shot 2023-12-24 at 10.46.57 am.pngScreen Shot 2023-12-24 at 10.50.09 am.png

Replies 7 (7)

KabirDev
Shopify Partner
248 61 71

@liemanco I couldn't access your website. You forgot to share the password.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
liemanco
New Member
7 0 0

Hi there, here's my pass : ahglia

 

For some reason, I'm also encountering another issue. When I make my browser smaller, the drawer menu on the left side is no longer popping up. There's also suppose to be a search symbol. Could you please help as well?

 

Thank you so much for your help and Merry XMAS!

KabirDev
Shopify Partner
248 61 71

@liemanco it looks like you have multiple issues in your store which need a Shopify expert to solve them for you.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com

sahilsharma9515
Shopify Partner
1257 163 241

Hi @liemanco I can't be able to look into your store so that I can provide you the exact code.

But you don't need coding for all your needs, some of them you can manage to handle from your theme itself.

There are some themes that use to provide you the option where you can edit the color of your header section and menu section, so my first suggestion will be that you will go in your customize theme option and search there if the above mentioned option is available or not, if not then please provide the storefront password so that I can provide you the code.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


liemanco
New Member
7 0 0

I've just DM you the password. Thank you so so much for your help

sahilsharma9515
Shopify Partner
1257 163 241

Hi @liemanco Thanks for providing the password, please add this code in your base.css file.

 

ul.list-menu.list-menu--inline {
    background-color: #99B9BC;
}

li > a#HeaderMenu-home {color: white;}

span.header__active-menu-item {
    font-weight: bold;
    color: white;
}

span {
    font-weight: bold;
    color: white;
}

ul#HeaderMenu-MenuList-2 {background-color: #99B9BC;}

ul#HeaderMenu-MenuList-5 {
    background-color: #99B9BC;
}

ul#HeaderMenu-MenuList-5 > a {
    color: white;
}

ul#HeaderMenu-MenuList-5 > li > a {
    color: white;
}

svg.icon.icon-caret {
    color: white;
}

details[open]>.header__menu-item{
    text-decoration-color: white;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-special-events- {
    text-color: white;
}

a#HeaderMenu-shop-decals-by-category-special-events-wedding-decal {
    color: white;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-special-events- > li > a {
    font-weight: bold;
    color: white;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-business- > li > a {
    color: white;
    font-weight: bold;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-wall-decals- > li > a {
    color: white;
    font-weight: bold;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-holiday-season- > li > a {
    color: white;
    font-weight: bold;
}

ul#HeaderMenu-SubMenuList-shop-decals-by-category-safety-glass-decal- > li > a {
    color: white;
    font-weight: bold;
}

If you are not sure where is your base.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search base.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

 

sahilsharma9515_0-1703652827436.png

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


liemanco
New Member
7 0 0

Thank you so so much for your help, is it possible to extend the background colour so that it's the window's width size and not just menu? And the dropdown menu to be white background instead?

 

I've also just made a change and used a mega menu instead as I wanted to achieve similar look as the inspo image. Hopefully that doesn't mess up your code!

 

Thank you so much!