Two menu question

[adrianmihalko]

Isn't there a way to work only with one menu? In the example is two menu, one for medium/large screen and one for small screens (mmenu).

I think it is not a great idea to use two menus (because of SEO, keyword stuffing -> I have a big menu with category names).

[RyanRayNeff]

I've been wondering this myself. I've integrated these two in Drupal by wiring the bootstrap hamburger button to open the mmenu instead, but I've still got two navs. I think you can use jQuery to strip the bootstrap nav classes out based on screen width, and then pop in the id that mmenu needs.

[RyanRayNeff]

Yep. It can be done. I did it with index.html in my branch: https://github.com/RyanRayNeff/mmenu-Bootstrap-3 In a nutshell, on pageload, jquery checks the screen width, and if it's mobile, it initiallizes mmenu, then plucks out some of the bootstrap nav classes. I switched the nav classes/id's all back to vanilla bootstrap stuff, so if you copy the scripts from the head you should be able to drop them into any bootstrap site. Works like a charm.

[adrianmihalko]

Hi @RyanRayNeff ,

I checked your demo, but I asked something different:

Imagine an ecommerce sidebar menu, with 20-30-40 menu items.

In this implementation (and in your) the categories are doubled. One for normal sidebar, one for mmenu:

//normal sidebar, hidden in XS view
<div class="col-sm-3 hidden-xs" role="navigation">
                            <div class="list-group">
                                <a href="#" class="list-group-item">Home</a>
                                <a href="#" class="list-group-item">Link 1</a>
                                <a href="#" class="list-group-item">Link 2</a>
                                <a href="#" class="list-group-item">Link 1</a>
                            </div>
                </div>

and

//mmenu
<nav id="menu-right" class="padd-menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>

...and I think this is keyword stuffing on the site, which is harm to your SEO.

In the last 7 day I am googling a solution to my problem, but so far I have found nothing. :(

[RyanRayNeff]

I see what your saying - only having a single menu to maintain is optimal, and thats what I was after too. I might have pointed you to the wrong file - check this one here: https://github.com/RyanRayNeff/mmenu-Bootstrap-3/blob/master/index.html (For the sake of Brevity, I only fixed this menu - the other menus remain unchanged) You can see the second menu was removed, and mmenu kicks in and restyles the default bootstrap menu only on mobile.