Indenting Menu Entries Means Beautifying!

Deep­er nest­ed menus are dis­played depend­ing on the size of the device. Stacked sub­menus on larg­er screens are more dif­fi­cult to read: Peo­ple stum­ble over what’s under­neath. Indent­ing menu entries is a good way to improve read­abil­i­ty:

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, 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.

---

And how does this …

… sup­port our migra­tion to bootScore? Well, once a web design­er has tak­en the first gen­er­al steps and has checked SEO, she will soon turn to a real­ly thick board, her prop­er­ly clus­tered and pre­sent­ed menu with­out get­ting too fan­cy. Even­tu­al­ly, she is going to spruce and speed up the dis­play of fixed and scal­able images. This post talks about a part of this way.

---