twitter bootstrap - moving objects to navbar when collapsed bootstrap 3 - html

Question

I got a topnavbar which disappears when the website gets loaded on a mobile device but I would like the content that is on that topnavbar to appear on the collapsed main navigation.
TOPNAVBAR
COLLAPSED NAVIGATION
How would I be able to achieve this or is this even possible or do I have to create a class specially for the collapsed menu?
Thank you in advance

Answer 1

What I sometimes do is the following:
1) You create your top-menu container for big devices
2) You create the same menu in your collapse container for small devices
3) Use css and #media to switch between to 2 lists
<header>
<div class="container">
<!-- Top menu for not mobile devices -->
<div id="top-menu" class="clearfix">
<ul class="nav navbar-nav">
<li>
<a href="#">
TopItem1
</a>
</li>
<li>
<a href="#">
TopItem2
</a>
</li>
</ul>
</div>
<!-- Navigation bar -->
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- Toggle menu -->
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="navbar-brand" href="/nl/">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
Item1
</a>
</li>
<li>
<a href="#">
Item2
</a>
</li>
<li>
<a href="#">
Item2
</a>
</li>
</ul>
<!-- Same top menu links for small devices -->
<ul class="nav navbar-nav navbar-right" id="top-responsive">
<li>
<a href="#">
TopItem1
</a>
</li>
<li>
<a href="#">
TopItem2
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
CSS:
Standard css style:
#top-responsive {
display: none;
}
#top-menu {
display: block;
}
With #media for small devices:
#media (max-width: 767px)
{
#top-responsive {
display: block;
}
#top-menu {
display: none;
}
}
Jsfiddle: http://jsfiddle.net/VDesign/qyosv002/
EDIT:
Like Vicente said, Bootstrap provides utility classes that does the same thing I do.
You can find the intell about it on the website of Bootstrap: http://getbootstrap.com/css/#responsive-utilities