XF 2.2 Hide off-canvas hamburger menu on mobile view

EchoRomeo

Active member
I'm building a small XF forum that's very simple and doesn't include any navigation whatsoever. However, even after I deselect all navigation tabs under "Public Navigation," the hamburger menu for off-canvas navigation still shows up in mobile view. I can't figure out how to hide this menu, which is now empty when opened. Does anyone know how to do this?

Thanks in advance!
 
This should work: add to extra.less template

Code:
.offCanvasMenu--nav .offCanvasMenu-content, .p-nav-menuTrigger

{display:none}

The first bit hides the opened menu, the second bit (after comma) hides the hamburger itself.

The logo may then need same padding

Code:
.p-nav-smallLogo {
 
    padding-left: 10px;}
 
Last edited:
I just thought, if that is the case then you don’t need to hide the off canvas if there is no hamburger, so presumably you just need

Code:
.p-nav-menuTrigger

{display:none}

Thanks @Mr Lucky! I really appreciate your input on this. However, the code you provided doesn't appear to work. When I use the first code you provided (.offCanvasMenu--nav .offCanvasMenu-content, .p-nav-menuTrigger {display:none}), the hamburger menu remains but fails to open when you click on it. The second code you provided (.p-nav-menuTrigger {display:none}) likewise doesn't remove the hamburger menu and the menu appears to open normally when clicked.
 
Last edited:
Ok - I did some googling and retried using some other related code that I noticed you posted in this thread. This version also incorporates @briansol's suggestion above to "add display:none to the element within a media query for small screens".

The below extra.less code successfully removes the hamburger menu:

Code:
@media (max-width: @xf-publicNavCollapseWidth)
{
    .has-js
    {
        .p-nav .p-nav-menuTrigger
        {
            display: none;
        }
    }
}
 
Back
Top Bottom