Sub Menu Dropping Behind Element

[Answered babcockamParticipant]

My submenu on; http://buckeyefenceservices.com, is dropping behind the layerslider I have placed below it.

I have pasted the folllowing code in the Custom CSS Rules box, and it usually fixes the problem, but it didn’t work this time.

#wvrx_columns-2 .wvrx-flex-cols {overflow:visible;}

 

Any suggestions?

Thank you!

[scramblerModerator]

Add the rule below to the theme Global Custom CSS Rule box

#wvrx_columns-2 .wvrx-flex-cols {overflow:visible;}

 

[babcockamParticipant]

That is the code I have placed under Main Options> Fonts & Custom>Custom CSS Rules.

But it isn’t working. There is another website I am having the same problem with:  https://serenityhomeimprovements.com/

[scramblerModerator]

You need to add important

#wvrx_columns-2 .wvrx-flex-cols {overflow:visible !important;}

[babcockamParticipant]

Thank you Scrambler.

Is adding, “!important”, the first thing to add when something doesn’t work?

[scramblerModerator]

No, the first thing to do would be to open the Browser Developer tools (F12) Inspect the element, and check why your rule is not working.

If you see your rule but it is being overridden by another one, then trying !important is one thing you can try. Another would be to check if the rule is being overridden because the selector you chose where not optimal compared to the one used by the overriding rule.

If you do not see your rule, then the problem could be that you placed it in the wrong place or that you had a Syntax error in your rule, or a syntax errors in some other custom rules before that.

[babcockamParticipant]

@scrambler Thank you for the information, I feel like that may be past my skill level 🙂

 

And the code worked on the Buckeye Fence website, but it isn’t working on Serenity Home Improvements.

 

https://serenityhomeimprovements.com/

[Best Answer scramblerModerator]

This reply has been accepted as the best answer.

The widget index is three. so the rule should be

#wvrx_columns-3 .wvrx-flex-cols {overflow:visible !important;}

Or probably just the one below would do to

.wvrx-flex-cols {overflow:visible !important;}

[babcockamParticipant]

THANK YOU!!

[Author]

Posts