Remove background color and width from a dropdown nav element

Question

I am translating my site using the WPML plugin. As you can see by clicking the link below, if you hover over the flag, the nav dropdown inherits the classes of the rest of the nav (a white backround, padded width, etc). I would like to make the background transparent, so that only the flags appear. I have tried to target this several ways, but to no avail. Here is the CSS I am trying to use. Can anyone help?

.sub-menu is--forced-placed {
  width: auto;
  background-color: none;
  color: none;
}

Link to my site: http://www.wgeil.de

Just a simple query but is the image transparent background as well? — Sagar, May 11 '17 at 12:02
I see a minor syntax error here. `is--forced-placed` is not a valid css syntax. what's happening there is that it is trying to find elements `is--forced-placed` withing the dom of class `sub-menu` — Sagar, May 11 '17 at 12:04

score 0 · Answer 1 · answered May 11 '17 at 12:02

0

you can try the below css

ul.primary-menu>.menu-item.menu-item-has-children>.sub-menu{
background-color:transparent;
}

answered May 11 '17 at 12:02

Vishal Panara

233
3
15

This is the closest anyone has come. But unfortunately it makes ALL of the dropdowns transparent (See my page). Is there some way to make only the language dropdown transparent? In addition, as you can see, the flag is not appearing directly below the other one. Is there some way to fix this? – Ron May 11 '17 at 14:11
what is `is--forced-placed` class for dropdown in your ul tag? its your custom class OR dynamically generated class? – Vishal Panara May 12 '17 at 04:01
It is dynamically generated. Perhaps by WPML? – Ron May 12 '17 at 07:15

Joel Stüdle · Answer 2 · 2017-05-11T12:30:56.007

ok, another try:

your css selector should look like .sub-menu.is--forced-placed because both classes are on the ul element. but if you use this selector it wont work because there is another css rule that overwrite this. we have to add the ul to the selector: ul.sub-menu.is--forced-placed. now this selector will overwrite the other rules appended to this element.

another thing is the min-width rule on your dropdowns affects the language dropdown to stretch to min-width: 13.75rem;. so we have to overwrite this too.

the last thing to say is that you cant set background-color or color to none. you have to use transparent.

try this css and tell us if this will work:

ul.sub-menu.is--forced-placed {
    min-width: auto;
    background-color: transparent;
    color: transparent;
}

a bit of explanation of what's happening would help the OP – Sagar May 11 '17 at 12:05 — Sagar, May 11 '17 at 12:05

Jamie Belcher · Answer 3 · 2017-05-11T12:14:24.067

0

Looking through the inspect, if you can find a way to add background-color: rgba(0,0,0,0); to the css below. You'll also want to remove the border So you don't get any funny lines.

ul.primary-menu > .menu-item.menu-item-has-children > .sub-menu {
    border-top: 1px solid rgba(0,0,0,0.075);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);  
}

Then it'll become transparent. Probably... Maybe..

The width I'm still looking at, but I'm also eating soup so I'm a tad slow right now.

edited May 11 '17 at 12:14

answered May 11 '17 at 12:05

Jamie Belcher

123
2
13

1

the width comes from .primary-menu>ul .children, ul.primary-menu .sub-menu {  min-width: 13.75rem; } – Joel Stüdle May 11 '17 at 12:37

score 0 · Answer 4 · answered May 11 '17 at 12:09

This

ul.primary-menu>.menu-item.menu-item-has-children>.sub-menu{
background-color:transparent !important;
}

The !important makes it override all rules

.sub-menu is--forced-placed {
  width: auto !important;
  background-color: none !important;
  color: none !important;
}

But I would use the first example background-color:transparent !important; insted of background-color:none !important;

Remove background color and width from a dropdown nav element

4 Answers4