How to change mobile menu active border color?

Hi @trishahdee
I appreciate your question.
1. If you want to add border in menu you need to add below CSS.

#menu-main-menu .menu-item a {
    border: 1px solid red;
}

2. Well if you want to add border in whole box then add below CSS.

#menu-main-menu .dropdown-menu {

    border: 5px solid red;
}

Above code looks like – [ https://prnt.sc/NoDy4aD__rm5 ] given in Screenshot

3. If you want to add border in menu items only then add below CSS.

#menu-main-menu .dropdown-menu .menu-item a {
    border: 2px solid red;
}

Above code look like [ https://prnt.sc/rRJULDpUJGYp ] this.
You can change color which you want also you can change width of border like 1px, 2px, 3px, according to your need.

Hope you find your answer. Thank you

• This reply was modified 9 months ago by narolainfotech.

Hi @trishahdee

You can add your CSS in your theme->customization-> custom CSS section or you can also do via your theme setting.

1. changing the border color
2. or removing complete border both solution is okay. that will not affect your menu look on other devices.

• This reply was modified 9 months ago by DevinLabs Solutions.

Okay, I figured it out. That one menu item is the parent of a dropdown menu, so it has to be identified as such. This is what worked. Note that I’m using a Bootstrap-based theme.

.nav-link.dropdown-toggle,
.nav-link.dropdown-toggle.show  {
  outline: transparent !important;
  border-color: transparent !important;
}