Technically, if you don't mind the positioning, you could tweak a bit the CSS to have them show, above the avatar, though.
Something along the lines:
.poster .menulevel2 {
display: block !important;
position: static;
width: auto; /*or maybe 100%, not sure */
}
[code]
Would be the basics, then you have to tweak some other styles to make it work the way you want.
As a basic implementation, this will work:
@media screen and (min-width: 33.75em) {
.poster {
display: flex;
flex-direction: column;
}
.poster .listlevel1.subsections {
order: 4;
}
.poster .listlevel1:hover > a::after {
display: none !important;
}
.poster .listlevel1.subsections > ul {
display: block !important;
position: static;
max-width: 90%;
margin: 0 auto 4px;
padding: 0 !important;
text-align: center !important;
border: solid #ddd;
border-width: 1px 0;
box-shadow: none;
opacity: 1 !important;
}
.poster .listlevel1.subsections > ul > li {
width: 100%;
}
.poster .listlevel2 > ol > li {
display: inline-block;
}
.poster .listlevel1.poster_avatar {
order: 1;
}
.poster .listlevel1.icons {
order: 2;
}
.poster .listlevel1.membergroup {
order: 3;
}
.poster .listlevel1.poster_online {
order: 5;
}
}
That is done as an override of this site's code, so should work if just added to custom.css. It will automatically revert to the standard display on small screens.