Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two Hamburger Menus on Mobile #418

Open
jamsoft opened this issue Feb 24, 2024 · 2 comments
Open

Two Hamburger Menus on Mobile #418

jamsoft opened this issue Feb 24, 2024 · 2 comments

Comments

@jamsoft
Copy link

jamsoft commented Feb 24, 2024

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/nav bars.

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.

@jamsoft
Copy link
Author

jamsoft commented Jun 1, 2024

Was just going to bump this one as I still haven't been able to get to the bottom of why this is happening.

Any advice would be great.

@malberts
Copy link
Contributor

Are you using the stickyhead.xml layout?

That layout has 2 menus and therefore 2 hamburger menus:

<component type="NavbarHorizontal" class="small bg-darker">
<component type="Menu" message="secondary-menu"/>
</component>
<component type="NavbarHorizontal">
<modification type="Sticky"/>
<component type="Logo" position="head"/>
<component type="NavMenu" flatten="navigation"/>
<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
<component type="PersonalTools" position="right"/>
</component>

If you did not intend to use 2 menus, rather use the fixedhead.xml layout, which is also sticky but has only 1 menu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants