Return to previous page

Styling sub-menus - by AdSh - on WordPress WooCommerce support

This topic has 5 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

AdSh

Participant

March 16, 2018 at 08:05

Hi,

I want to make some changes in the sub-menus as follows:
1. make the background transparent.
2. make it small, not full width, as shown in the link. https://www.dropbox.com/s/gdrdem1ngjgovxa/ex.png?dl=0

Thanks

#188409 Copied

4 Answers
Rose Tyler

Support staff

March 16, 2018 at 08:47
Hello,

1. Please change this code
```
.main-nav .menu > li .nav-sublist-dropdown {
    background-color: black !important;
}
```
to
```
.main-nav .menu > li .nav-sublist-dropdown {
    background-color: #00000069 !important;
}
```
2.
```
.fixed-header .menu > li.menu-full-width .nav-sublist-dropdown, .main-nav .menu > li.menu-full-width .nav-sublist-dropdown {
    width: 20%;
    left:  auto;
}
```
Regards
#188419 Copied
AdSh

Participant

March 16, 2018 at 09:47

Hi,
thanks.

One more thing, I want to change the color of the border and make it as in the attachment.
Please check the following link: https://www.dropbox.com/s/b2yizefr2waezhp/1.png?dl=0

#188438 Copied

AdSh

Participant

March 16, 2018 at 10:11

Hi,

also, please tell me how to make the transparent background darker.

Thanks

#188445 Copied
Rose Tyler

Support staff

March 16, 2018 at 16:35
Hello,

1.
```
.fixed-header .menu > li.menu-full-width .nav-sublist-dropdown, .main-nav .menu > li.menu-full-width .nav-sublist-dropdown {
    border-bottom: 3px solid #692d9c;
    border-top: 3px solid #692d9c;
}
```
2. Please delete this code:
```
.main-nav .menu > li .nav-sublist-dropdown {
    background-color: #00000069 !important;
}
```
and change this one:
```
.main-nav .menu > li .nav-sublist-dropdown {
    background-color: black !important;
}
```
to:
```
.main-nav .menu > li .nav-sublist-dropdown {
    background-color: black !important;
    opacity: 0.8;
}
```
Regards
#188517 Copied
Viewing 5 results - 1 through 5 (of 5 total)