Categories
css html javascript jquery twitter-bootstrap

How to expand a Bootstrap 3 dropdown when viewing on desktop?

My aim is to use a Bootstrap 3 dropdown to display links at mobile screen size and use a list to display the same links when the screen is bigger (desktop and tablet size).

Dropdown markup:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

List markup:

<ul class="list-inline">
<li>...</li>
</ul>

My thoughts were to use the responsive utility classes to display and hide the markup via media queries. For example:

<ul class="list-inline visible-xs-block">
<li>...</li>
</ul>

However, this approach would mean a whole bunch of links are hidden and I’m not entirely convinced hiding links in this way is a great approach. How can I achieve my aim without hiding links?

Here is a demo of what I’m trying to achieve:

JSFIDDLE

Media Queries ?

CSS :

@media screen and (min-width: 768px) {
.dropdown button{
display:none;
}
#mylist {
display:block;
clear:both;
position: relative;
}
#mylist li{
float:left;
}
}

Fiddle : http://jsfiddle.net/g8c194n4/1/