Indent and Beautify!

Deep­er nest­ed menus are dis­played depend­ing on the size of the device. Stacked sub­menus on larg­er screens are unfriend­ly for the read­er. Peo­ple stum­ble over what’s under­neath. So let us soft­en the stack­ing a bit.

Solution:

• Just add the fol­low­ing code to your _bscore_custom.scs file:

@include media-breakpoint-up(lg) {
  ul.depth_1 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_2 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_3 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_4 {
    left: 25% !important;
    top: 0% !important;
  }
}

Background

Up to the boot­strap break­point LG, the sub­menus are embed­ded into the menus by shift­ing the fol­low­ing ele­ments down­wards. So, noth­ing is hid­den. The read­er sees direct­ly what is meant. Above the boot­strap break­point LG, the sit­u­a­tion is dif­fer­ent: Here, the sub­menus are stacked on top of each oth­er. This is dis­tract­ing. The read­er first thinks about what is under­neath. But if we move the sub­menus a lit­tle right, how­ev­er, the pre­vi­ous remains rec­og­niz­able although the read­er can focus on the new.