imjustaguy imjustaguy - 1 month ago 8x
HTML Question

Why my bootstrap navbar didn't work on mobile phone?

I'm using rails with gem 'bootstrap-sass', '~> 3.3.6' and this is my html:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand brand-name" href="#">Brand<br><p>MUSIC FESTIVAL</p></a>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li><a class="sections" href="#">LINE-UP</a></li>
<li><a class="sections" href="#">BOLETOS</a></li>
<li><a class="sections" href="#">FAQ'S</a></li>
<ul class="nav navbar-nav navbar-right">
<li><a id="date-festival">test</a>/li>

The problem is when I visit my page on a phone the navbar is still the desktop version.
ps: I already have my bootstrap after jquery.


You should to add meta tag in head section:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">