How to make double navbar responsive - html

Question

I am currently redesigning a website who has a two row responsive navbar , but now get stuck.
#media (min-width: 767px) {
.nav.navbar-nav {
float: right;
}
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
</ul>
</div>
</div>
If the screen is wider than 767px it looks like this (which looks precisely what I want (check first image)...but..
when the screen is smaller than 767px (second image), the navigation menu looks like this and that is not what I want. "Community" and "global" should be displayed below under store, but how can I fix that

Answer 1

I would just add duplicate menu options, meaning hide the first one on tablet/phone and show the second one on tablet/phone, as so: (check bottom of second navigation for adjustment)
<div class="navbar navbar-default navbar-fixed-top">
<!-- hide this nav on tablet/phone ****************************** -->
<div class="collapse navbar-collapse hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
<!-- ****************************************************** -->
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Community" -->
</li>
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Global" -->
</li>
</ul>
</div>
</div>