I have been working on a website using Bootstrap and everything seems to be running smoothly. However, I've encountered an issue where the navbar doesn't collapse when viewing the site on my iPhone. It works perfectly fine when viewed on my Windows phone.
Below is the code for the header section. Can anyone pinpoint why this problem is occurring?
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php wp_title( ' | ', true, 'right' ); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Top logo and Search Bar -->
<div class="row header navbar">
<div class="container">
<div class="col-md-3 logo-header hidden-xs hidden-sm">
<a href="<?php echo home_url(); ?>/">
<img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive">
</a>
</div>
<div class="col-md-3 logo-header hidden-lg hidden-md">
<a href="<?php echo home_url(); ?>/">
<img src="<?php echo bloginfo('template_directory');?>/img/logo.jpg" alt="map consulting Logo" class="img-responsive img-center">
</a>
</div>
<div class="clear"></div>
<div class="col-md-3 pull-right hidden-xs hidden-sm">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="s">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="icon-search"></i></button>
</div>
</div>
</form>
</div> <!-- end of col md 3 -->
<!-- Navigation for Phone and Tablet - hidden on large screens -->
<div class="row hidden-lg hidden-md" id="mobileSearch" style="margin-bottom:10px;">
<div class="collapse-navbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="menu-items">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 1,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav navbar-nav') ); ?>
</div>
</div>
</div>
<!-- Navbar for large screens, hidden when on phone or tablet -->
<div class="col-md-4 hidden-xs hidden-sm site-title pull-right">
<div class="navbar-header">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 1,
'container_class' => 'nav-large',
'menu_class' => 'nav navbar-nav') ); ?>
</div> <!-- navbar collapse -->
</div> <!-- navbar header -->
</div> <!-- col md 4 -->
</div> <!-- end of container -->