I am using Twitter Bootstrap 3 to create this site www.peoplespropertyshop.co.uk as you can see the navigation on larger screens has a jquery effect to drop the boxes down.
My problem was that this was occuring on the small screen too and looked awful. I have create to different nav sections and hidden the animated one through media queries and hidden the other other nav from all other devices.
However for the life of me i cant see why when you click the icon in small screen view it doesn't animate anymore but the list is not appearing either.
<link href="css/styles.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
<link href="css/menu.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
</div>
<!-- Small Screens Nav Bar -->
<div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
<ul class="nav nav-pills navbar-right hidden-xs">
<li><a href="index.html">Home</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="whatwedo.html">What We Do</a></li>
<li><a href="whowehelp.html">Who We Help</a></li>
<li><a href="news.html">News/Events</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
<!-- Larger Screens Nav Bar -->
<div class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right hidden-xs">
<li class="blue">
<a href="index.html">Home</a>
<p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
<a href="whoweare.html">Who We Are</a>
<p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
<a href="whatwedo.html">What We Do</a>
<p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
</li>
<li class="blue">
<a href="whowehelp.html">Who We Help</a>
<p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
<a href="news.html">News/Events</a>
<p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
<a href="contact.html">Contact</a>
<p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In my opinion you don't need an extra div, you can change your div with mediaqueries
#divMenu{
/* do something when it is normal */
max-width:1000px;
}
@media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
/* do something when it's too small */
max-width:800px;
}
}