Background colour for menu

This topic has 16 replies, 3 voices, and was last updated 4 years, 3 months ago by Elise Noromit.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
October 20, 2020 at 1:03 pm #234762

Woolsome
Participant

Hello.
I was able to change this menu’s background colour in the dashboard… into BLUE.
But the rest of the menu is still black.

Where can I change it ?

Thank you for your help

Attachments:
You must be logged in to view attached files.

October 20, 2020 at 2:45 pm #234798
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .color-scheme-light .woodmart-product-categories .children {
    background-color: red;
}
```
Best Regards
October 20, 2020 at 4:46 pm #234811

Woolsome
Participant

Thank you very much. It works.
And if I would like to change both things in the future in one place in CSS. I mean ..
– mentioned menu background that I was already able to setup via panel into BLUE
– and these children that you have just helped me to change .

What i should place in CSS to be able to have all settings close to each other … for easy change in the future ?

Thank you in advance

October 20, 2020 at 7:36 pm #234832

Elise Noromit
Member

Hello,

You can change these styles as per your needs. Just change the color. If you need to change something else, provide the page URL, and screen what you want to change we’ll provide custom CSS.

Best Regards

October 20, 2020 at 9:34 pm #234850

Woolsome
Participant

Thank you .
Please take a look on pics attached.

pic “menu-3” : I would like to know how to change through global CSS background on the field no 1.

pic “menu-4” : I would like to know how to change through global CSS background and fonts styles and colours on the fields of menu named as no 2. and no 3.

How am I able to change hover behaviour there on the last menu ? So hover comes with orange sliding in uderlining, like in other menus ?

Thank you in advance

Attachments:
You must be logged in to view attached files.

October 21, 2020 at 9:27 am #234961
Elise Noromit
Member
Hello,

Browse categories color is changed in the Header builder in the element.

Category menu color is changed by custom CSS:
```
body .color-scheme-light .woodmart-product-categories .children {
    background-color: red;
}
.header-categories-nav .categories-menu-dropdown .item-level-0>a {
    color:white
}
.header-categories-nav .categories-menu-dropdown .item-level-0>a:hover {
    color:yellow;
	background-color:green; 
}
body .vertical-navigation .menu-simple-dropdown li a {
    color: red;
	background-color:yellow;
}
body .vertical-navigation .menu-simple-dropdown li a:hover {
    color: yellow;
	background-color:green;
}
```
Best Regards
November 4, 2020 at 7:45 pm #238783

krojas
Participant

Hi.
I need to change the Browse Category menu’s background colour of the pulldown from white to black.

I understand that I must use one of the custom CCS that you wrote down but I’m not sure which is it.

Can you help me ?

Thanks
Kati

November 5, 2020 at 8:17 am #238911
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
.header-categories-nav .categories-menu-dropdown .item-level-0>a {
    background-color:black;
}
```
Best Regards
November 5, 2020 at 11:06 pm #239265

krojas
Participant

Thanks Elise, work nice.. but I need a little help more, we need the letters of the Browse Category menu’s in white (or more white than now) and the pulldown without white border.

Similar to the demo_dark but with black border

Thanks and regards
K

November 6, 2020 at 10:11 am #239352
Elise Noromit
Member
Hello,

Replace the code with this one:
```
.header-categories-nav .categories-menu-dropdown .item-level-0>a {
    background-color:black;
	  color:white;
}
```
Best Regards
November 6, 2020 at 12:35 pm #239405

krojas
Participant

Thanks Elise, perfect..

We need the arrow > for open the subcategory in white too, is it another css code?

And the edge of this dropdown, is posible in black?

Thanks for all your help and regards
K

November 6, 2020 at 2:54 pm #239484

Elise Noromit
Member

Hello,

Enter each HTML block and set the black color in the column https://prnt.sc/vepgda

Best Regards

November 6, 2020 at 3:54 pm #239520

krojas
Participant

Sorry Elise for the misunderstanding

What I need to change is the arrow icon (>) of the Browse Categories Menu, next to the name of the category to white and the edge of this menu to black.

Please see the image attached.

Thanks,
K

November 6, 2020 at 3:58 pm #239521

krojas
Participant

Sorry Elise for the misunderstanding

What I need to change is the arrow icon (>) of the Browse Categories Menu, next to the name of the category to white and the edge of this menu to black.

Please see the image attached again

Thanks,
K

Attachments:
You must be logged in to view attached files.

November 6, 2020 at 9:23 pm #239568
Elise Noromit
Member
Hello,

Sorry, forgot to give you the code.

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .vertical-navigation .item-level-0.menu-item-has-children>a:after {
	  color:white;
}
```
Best Regards
November 10, 2020 at 10:36 pm #240583

krojas
Participant

Thanks Elise. Works perfect!

One more question. Is it possible to change the color of the border line of the dropdown? (Categories Menu). Actually it’s white but I want to test grey or black

Attached you will find the screenshot

Thanks in advance
K

Attachments:
You must be logged in to view attached files.

November 11, 2020 at 8:38 am #240650
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .vertical-navigation .item-level-0 {
    border-bottom: 1px solid red;
}
body .vertical-navigation .menu {
    border: 1px solid red;
	  background-color:transparent;
}
```
Set the color as per your needs.

Best Regards
Author

Posts