How to change the header menu drop down folder color ?

This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by Artem Temos.

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

Author

Posts
December 11, 2018 at 7:11 am #95321

Xtolia
Participant

Hi Team,

I attached two images hope you can see them, it will help. I want to change the menu drop down background color. For example the main font is white all around.. when they hover over the menu tab folder..the bk color is #222222 and if they click or hover the font hover color shows another color such as #f45d02 (orange)

Any css coding you can provide me to handle this? The image file name example-menu* is what I want ideal to do copy style. This is the company site in my example if you need it.

https://www.bromic.com/heating/

As for the other image encino-fireplace* is my current website I am working on. Also, if you view the image you can see I have an arrow pointing asking how to increase the menu padding on the dropdowns. Let me know if you need me to do anything. Thanks ahead of time!

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

December 11, 2018 at 10:02 am #95359
Artem Temos
Keymaster
Hi,

You can change the drop-down color scheme while editing your menu in Appearance -> Menus.

Use the following CSS code to change dropdowns width and padding
```
li.menu-simple-dropdown .sub-menu-dropdown, 
li.menu-simple-dropdown .sub-sub-menu {
    width: 250px;
    padding-top: 10px;
    padding-bottom: 10px;
}
```
Regards
December 11, 2018 at 1:01 pm #95422

Xtolia
Participant

OKay great thank you,

However how do you make the banners page title bar increase in height size?

December 11, 2018 at 1:31 pm #95431

Artem Temos
Keymaster

Page title bar size can be set in Theme Settings -> Page heading.

December 11, 2018 at 2:20 pm #95460

Xtolia
Participant

Yes, that part I know… as it has only three size options. How can I enlarge the height more? Is it possible. View attachment

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

December 11, 2018 at 2:30 pm #95463
Artem Temos
Keymaster
You can use the following CSS code for this
```
div.page-title {
    padding-top: 150px;
    padding-bottom: 150px;
}
```
Author

Posts