I don't know where to put this, so I went to the Off-Topic subforum.
The menu does not appear on mobile phones anymore :
Looking at the HTML code, I figured out it's missing a button here :
<li data-ipsdrawer="" data-ipsdrawer-drawerelem="#elMobileDrawer">
<a href="#"><i class="fa fa-bars"></i></a>
</li>
Once the button is back, clicking on it show a broken menu :
Far from being good with CSS, I tried to fix this
// this is a missing line that is responsible for breaking the menu
.ipsFlex.ipsFlex-fd\:column {
flex-direction: column;
}
// color of the notification icons, feel free to change it
.cUserNav_icon a {
color: #3d6594;
}
// leave some space around the notification icons so it's not stuck on the edge of the screen
#elUserNav_mobile {
margin: 0 10px;
}
The result :
I'd like to also add some minor modifications in order to improve the look of the site :
// 1. fix page title padding
.ipsPageHeader {
padding: 10px;
}
// 2. Hide rank from mobile menu (missing on desktop, retrievable from our profile)
.elMobileDrawer__rank {
display: none;
}
// OR decrease the size of the rank icon
.elUserNav_achievements__icon img {
width: 64px;
height: auto;
}
// Note: the CSS class "ipsDimension:3" is missing
// 3. Center the icons from the forums page when on mobile
@media screen and (max-width:979px) {
.ipsItemStatus.ipsItemStatus_large {
line-height:30px;
}
}
// 4. improve the icons on the small badges besides topics (pinned, poll, ...)
.ipsBadge.ipsBadge_icon.ipsBadge_small i {
height: 14px;
vertical-align: middle;
color: #fff;
}
.ipsBadge.ipsBadge_icon.ipsBadge_small {
line-height: 18px;
}
