XF 2.2 Hide off-canvas hamburger menu on mobile view

[EchoRomeo]

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!

 

[briansol]

you can use extra.css to add display:none to the element within a media query for small screens. I think max-width 348px is what is used by default.

use f12 tools to get the selector ID

 

[Mr Lucky]

This should work: add to extra.less template

.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

.p-nav-smallLogo {
 
    padding-left: 10px;}

 

[Mr Lucky]

the second bit (after comma) hides the hamburger itself.

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

.p-nav-menuTrigger

{display:none}

 

[EchoRomeo]

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

.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.

 

[EchoRomeo]

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:

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

 

[Mr Lucky]

Aha, it needed the !important

{display:none!important}

Glad you got it sorted

 

[EchoRomeo]

Aha, it needed the !important

{display:none!important}

Glad you got it sorted

Nice, thanks! Yes, I just tried that and it makes the hamburger menu disappear with much less code.

 

[Mr Lucky]

Nice, thanks! Yes, I just tried that and it makes the hamburger menu disappear with much less code.

Funny, yesterday it was fine on my forum with !important, but today I got the same as you and the !important sorted it. Still your code with the @media may actually have more the technically correct way of doing it because it overrides the exact code.