TWBS Navbar on mobile device, disable dropdown menu and use link instead - ios

Question

Is there a way to disable the dropdown menu in Twitter Bootstrap 3 navbar when viewing on an iPhone and similar device sizes and then to replace it with a link to another screen.
The menu takes up a lot of space. On a desktop (even a tablet) this doesn't matter. On a mobile phone I would like it to take you to a different page and disable the dropdown altogether.

Answer 1

CSS Approach
I would use the responsive classes for this. It's probably not ideal to have extra markup for hidden elements, but it is the easiest and most reliable approach and requires no Javascript.
demo
...
<li class="visible-xs-block"><span class="glyphicon glyphicon-user" aria-label="My profile"></span> My Profile</li>
<li class="dropdown hidden-xs">
<span class="glyphicon glyphicon-user"></span> My Profile <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-signal"></span> Statistics</li>
<li><span class="glyphicon glyphicon-certificate"></span> Certificates</li>
<li><span class="glyphicon glyphicon-star"></span> Favorites</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</li>
...
In the above snippet, you'll see that I'm using the visible-xs-block class on the <li> with the link to your alternative page. This will insure that that this element is hidden, except on mobile devices. On the dropdown, I've used the hidden-xs class, which will hide the dropdown only on mobile devices.
Javascript Approach
You can do this with Javascript as suggested by #cvrebert, and if you don't have to worry about support for IE8 or IE9, you can do this easily with matchMedia.
JS (no support for IE8/9)
if (window.matchMedia("(max-width: 768px)").matches) {
/* the view port is less than 768 pixels wide */
/* hide your dropdown and display your link */
} else {
/* the view port is at least 768 pixels wide */
/* show your dropdown and hide your link */
}
It's a bit more complicated if you want a Javascript solution and need to support IE8/IE9 because you'll have to monitor the window resize event. To do this efficiently, you'll probably want to debounce or use a timeout.
Again, to me, the best way is the CSS approach above.