responsive top-bar not expanding

Question

I have the following HTML code:

<div class="nine columns">
        <nav class="top-bar">
          <ul>
            <li class="name"><h1><a href="#"> Please select your page</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
          </ul>
          <nav>
            <ul class="right">
            @if (User.IsInRole("MetaAdmin"))
            { 
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")  
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                                                                                      
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("Admin"))
            {
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
              @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")  
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("CompanyManager"))
            {
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
              @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            else if (User.IsInRole("StandardUser"))
            {
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
            }
            else
            {          
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            </ul>
          </nav>
        </nav>
      </div>

I am using Media query to change the menu items at the top into a dropdown menu at a certain width but upon clicking on the dropdown it is failing to expand. I have included the necessary css files. Anyone ever experienced similar issue?

JSFIDDLE here http://jsfiddle.net/P8XfY/

Answer 1

I was having some conflicts with the javascript file that I was unable to determine the root cause of. Adding expanded class to the nav topbar resolved my issue so I have written the following javascript code:

$(document).ready(function () {
      $('#toggleit').click(function () {
          if ($('#TopNavigation').hasClass('expanded')) {
              document.getElementById('TopNavigation').classList.remove('expanded');
          }
          else if (!$('#TopNavigation').hasClass('expanded')) {
              document.getElementById('TopNavigation').classList.add('expanded');
          }
      });
  });;

I then changed my topheader as follows:

 <div class="nine columns">
        <nav id="TopNavigation" class="top-bar">
            <ul id="toggle-topbar">
                <li class="name"><h1><a href="#"> Please select your page</a></h1></li>
                <li class="toggle-topbar"><a id="toggleit" href="#"></a></li>
            </ul>
          <section>
            <ul class="right">
            @if (User.IsInRole("MetaAdmin"))
            { 
              @Html.MenuItem("Admin", "Index", "Admin", "icon-lock")
              @Html.MenuItem("Home", "Index", "Home", "icon-home")
                if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness")
                {
                @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop")
                }
              @Html.MenuItem("Course", "Index", "Course", "icon-tasks")
              @Html.MenuItem("Profile", "Index", "Profile", "icon-user")  
              @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                                                                                      
              @Html.MenuItem("Contact", "Index", "Contact", "icon-comments")
            }
            ................................