How to change mobile menu active border color?

  • Resolved trishahdee

    (@trishahdee)


    1 year, 2 months ago

    For the life of me, I can not figure out what CSS is generating this bright blue border (outline?) when a mobile menu item is clicked on. I’ve tried everything I can think of. Any ideas?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • narolainfotech

    (@narolainfotech)

    1 year, 2 months ago

    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

    DevinLabs Solutions

    (@devinlabsolutions)

    1 year, 2 months ago

    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.
    Thread Starter trishahdee

    (@trishahdee)

    1 year, 2 months ago

    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;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change mobile menu active border color?’ is closed to new replies.