Quitar marcas y fondos de formularios y desplegables de elementor

 

Elementor dropdown menu highlights menu item and shows border or outline

Ask Question

Asked 1 year, 6 months ago

Modified 1 year, 6 months ago

Viewed 2k times

0

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!

Edit: Thanks to @Alivia Pramanik for the quick and easy solution!

• html
• css
• wordpress
• elementor

Share

Improve this question

edited Nov 25, 2022 at 9:52

asked Nov 24, 2022 at 16:17

Nemo Leerink

333 bronze badges

Add a comment

1 Answer

Sorted by:

                                              Highest score (default)                                                                   Trending (recent votes count more)                                                                   Date modified (newest first)                                                                   Date created (oldest first)                              

0

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

Ref https://stackoverflow.com/questions/74563643/elementor-dropdown-menu-highlights-menu-item-and-shows-border-or-outline