Submenu is not indented on mobile devices

BB Theme
1

I noticed that when I look at my menu on a phone it only shows one submenu layer. Is there a way to separate the submenus by indenting the 2nd submenu instead of just listing them all even with the 1st submenus? You can see this at kyl.org. If you look at the desktop version and click on KYL News you see a bunch of divisions. When you hover over those division names (like Royal Friends, Pac5, Karenas, etc.) there is a submenu that pops out on the side with a list of teams in that division. But if you look at it on a phone it just merges everything into one long list without indenting any of the submenus… any idea?

2

Hey Coachtim,

Thanks for posting! Try using the CSS snippet below. You can place it directly under Theme Customizer > Code > CSS Code. This should indent the 2nd submenu on mobile.

@media (max-width: 767px) {
  ul.sub-menu ul.sub-menu li a {
    padding: 15px 40px;
  }
}

Ben