Topic on Skin talk:Chameleon

Two Hamburger Menu Buttons on Mobile

4
Summary by Kghbln

Tracked with issue 418 on GitHub

Findjam (talkcontribs)

I've installed Chameleon on my wiki and everything is working great. It's a fantastic skin. The only issue I'm seeing is that when viewing on mobile I have two hamburger menu buttons.

One has this element:

<nav class="p-navbar collapsible small bg-darker" role="navigation" id="mw-navigation">

Which doesn't work when clicked on.

And one with:

<nav class="p-navbar collapsible" role="navigation" id="mw-navigation-hn470628vf" style="position: relative; left: auto; width: 412px;">

Which does work and is the one that is supposed to be displayed.

MediaWiki version: 1.41.0

PHP version: 7.4.33

Chameleon version: 4.3.0

Bootstrap (extension) version: 4.6.2

I did have MobileFrontEnd installed previously but I've disabled that and still have this issue.

# wfLoadExtension( 'MobileFrontend' );

# $wgDefaultMobileSkin = 'minerva';

I've tried explicitly setting this to Chameleon as well:

# $wgDefaultMobileSkin = 'chameleon';

But that didn't fix the issue either. Not sure what to try at the moment. Any advice appreciated.

PatrikRoy (talkcontribs)

I don't know which layout you're using, but I got this same problem using stickyhead.

In your xml template file, add collapsible="no" to the first component:

<component type="NavbarHorizontal" class="small bg-darker" collapsible="no">

Or delete the entire first horizontal navbar if you don't use it.

Findjam (talkcontribs)

Brilliant PatrikRoy. This did the trick. Thank you.

Kghbln (talkcontribs)
Reply to "Two Hamburger Menu Buttons on Mobile"