Elementor dropdown menu highlights menu item and shows border or outline

Issue

this is my first question on here. Any feedback is welcome.
I’m creating a dropdown menu for the mobile version of our site and I’m running into an issue that seems quite straight forward.

In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.

It seems like the menu item is set to active and the default border/overlay is added. I don’t see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don’t want any changes to happen.

I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.

I also tried adding the following CSS to the element but this didn’t help:

selector .menu-item {
    border: none;
    outline: none;
}

I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.

My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I’m not familiar with.

Many thanks in advance!

Solution

Welcome to SO. If I am not mistaken, you can change this with Elementor’s own design. To do with this custom CSS, add this,

.elementor-nav-menu--dropdown .elementor-item:focus {
  background: #0000!important;
  outline: 0!important;
}

See the image for your reference

See the image for your reference

Answered By – Alivia Pramanik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published