Bootstrap - Two Navigation Menus combined in Mobile View

I have two menus on my desktop site.  When I view on mobile the bootstrap mobile menu only shows my secondary menu and the first one is missing completely.

What's the best method to show both menu options in the single menu dropdown mobile view?

https://jsfiddle.net/2ku67ou7/

<!--Skinny Top Nav-->
    <nav class="navbar navbar-default navbar-fixed-top" style="height:25px;min-height:25px;background:#fff;">
        <div class="container">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/messages" style="height: 25px;padding:3px 15px;font-size:12px;">
                         
                            <span class="badge badge-success" style="position:absolute;top:1px;background-color:red;right:87px;z-index:999;font-size:12px;font-weight:600;padding:2px 5px;"><?php echo $unread;?></span>
                            <?php ;}?>
                            <i class="fa fa-envelope"></i> MESSAGES
                        </a>
                    </li>
                    
                    <li><a href="/admin" style="height: 25px;padding:3px 15px;font-size:12px;"><i class="fa fa-cog"></i> ADMIN</a></li>
                    
                    <li><a href="/account" style="height: 25px;padding:3px 15px;font-size:12px;"><i class="fa fa-user"></i> ACCOUNT</a></li>
                    <li><a href="logout.php" style="height: 25px;padding:3px 15px;font-size:12px;">LOGOUT</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Second nav bar-->
    <nav class="navbar navbar-default navbar-fixed-top" style="margin-top:25px;height:75px;min-height:75px;background:#fff;border-color:#eb6e1f;border-width:0 0 2px;">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/dashboard" style="padding:10px 15px;">
                    <?php if($logo == 'default'){?>
                    <img src="images/logo_20150430123817.png" style="width:100%;max-width:200px;max-height:50px;"/>
                    <?php ;}else{?>
                    <img src="upload/<?php echo $orgID;?>/<?php echo $logo;?>" style="width:100%;max-width:200px;max-height:50px;"/>
                    <?php ;}?>
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                <ul class="nav navbar-nav navbar-right navStyle" style="margin-top:28px;background:#fff;">
                    <li><a href="/">DASHBOARD</a></li>
                    <li><a href="assets">ASSETS</a></li>
                    <li class="dropdown">
                        <a href="#" style="padding-bottom:10px;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">TRAINING</a>
                        <ul class="dropdown-menu" role="menu" style="text-align:center;">
                            <li><a href="library">LIBRARY</a></li>
                            <li><a href="forums">FORUMS</a></li>
                        </ul>
                    </li>
                    <li><a href="reports">REPORTS</a></li>
                </ul>
            </div>
        </div>
    </nav>

Open in new window

LVL 12
Nathan RileyFounderAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
For the moment I found the way to have two mobile button:

http://jsfiddle.net/RfsS9/5/
Marco GasiFreelancerCommented:
Got it! https://jsfiddle.net/2ku67ou7/
There's som styling work to do but I think it could work. The secret is to replace the data-target value with a class and give this class to both div which actually hold the two navbars
Hope this helps
Nathan RileyFounderAuthor Commented:
On your second answer when I take a look at your link I still only show options from the second sidebar in the mobile view, are you sure you posted the correct link?

Thanks
Marco GasiFreelancerCommented:
I'm sorry, don't know what went wrong :-): https://jsfiddle.net/kbdedkuq/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.