Sidebar header dropdown shows two columns

[tomtjes (Thomas Reintjes)]

After a recent update, the header dropdown version of the sidebar shows two columns on my instance (Minima theme). Doesn’t feel intentional.

[david (David Taylor)]

The extra column is intentional (per this commit), but I don’t think it’s supposed to be that narrow

(cc @awesomerobot)

[Lilly (Lillian)]

i’m going to be rolling the drop down sidebar out on our site in the coming weeks (we use the legacy hamburger menu still). and i like the two column view that makes it visually more like the legacy menu. is the column width accessible via CSS code?

[awesomerobot (Kris)]

@david

I don’t think it’s supposed to be that narrow

The theme forced the old menu to a single-column, that doesn’t work well with the new menu, so I’ve removed it here:

UX: remove max-width on hamburger menu (#3)

Thanks for reporting it @tomtjes!

@Lilly

i like the two column view that makes it visually more like the legacy menu. is the column width accessible via CSS code?

yes, the relevant CSS we’ve added is:

.hamburger-panel .revamped .sidebar-section-wrapper.sidebar-section ul {
  display: grid;
  grid-template-columns: 1fr 1fr; 
}

So to get it back to one column you could do this in a theme:

.hamburger-panel .revamped .sidebar-section-wrapper.sidebar-section ul {
  grid-template-columns: 1fr; 
  // you can also do something like `30% 70%` if you want to edit the column widths
  // or `1fr 1fr 1fr` if you want 3 even columns
}

Or if you want the entire menu wider (the columns will adjust automatically) you could do something like this:

.hamburger-panel .revamped  {
   width: 500px;
}

[tomtjes (Thomas Reintjes)]

Perfect, thanks for the quick fix and additional instructions!

[Lilly (Lillian)]

thank you for the detail @awesomerobot