Commander X16

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;

}

This is driving me crazy. Thanks for pointing it out.

There's a little tool in Chrome to show the mobile version of pages: 



I see the behavior you're talking about, and the menu is indeed disappearing. Rotating my iPad horizontal brings up the full menu, but my phone stubbornly refuses to show it. I'm looking at the template code now, so I'm hoping to figure out where to add the code you suggested. 

I'll keep you guys posted. Thanks.

 

I reactivated the menu in the CSS, but as Vincent said, the sub-menus are borked. I'll work on it more tomorrow when I have some brainpower left over. 

 

Ok, there's still some weirdness with the layout (and I dislike the fact that the text doesn't reflow when zoomed), but it's as good as I can get it right now without spending a lot more time understand the layout and the templates.