Responsive Navigation not behaving as expected on Mobile Devices

Question

I'm trying to make a dropdown vertical nav in the footer of a site I'm working on. It sort of works on desktops. But on the iPhone I'm testing the media query, when a sublink is selected, it choose the main link "below" it and opens up that link's submenu. My HTML CSS and JS follow:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper">
    <div id="sidebar">
    </div>
    <div id="main">
    <div id="content">
    <div id="header">
    <nav id="headernav">
        <ul>    
<li><a href="#about">|&ensp;About&ensp;|</a>
   <ul>
      <li><a href="mission/">Mission Statement</a></li>
      <li><a href="#history">History</a>
         <ul>
            <li><a href="first50/">First 50 Years</a></li>
            <li><a href="next20/">Last 20 Years</a></li>
            <li><a href="recent/">2002 - Present</a></li>
         </ul>
      </li>
      <li><a href="districts_map.pdf">District Map</a></li>
      <li><a href="board/">Board of Directors</a></li>
   </ul>
</li>
<li><a href="#members">&ensp;Members&ensp;|</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="section/">Member Section</a></li>
      <li><a href="jobbank.iphtml">Job Bank</a></li>
      <li><a href="#newsletter">Newsletter</a>
         <ul>
            <li><a href="summer/">Current Issue</a></li>
            <li><a href="newsletters/">Archived Issue</a></li>
         </ul>
      </li>
      <li><a href="bylaws.doc">Bylaws</a>
      <li><a href="members/">Sign In</a></li>
      <li><a href="dues/index.iphtml">Pay Dues</a></li>
      <li><a href="forgotten_password.iphtml">Password Recovery</a></li>
      <li><a href="addresschange.iphtml">Change my Contact Information</a></li>
      <li><a href="links/">Links to Other Subspecialty Groups</a></li>
   </ul>
</li>
<li><a href="#join">&ensp;Join&ensp;|</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="join.pdf">Membership Application</a></li>
   </ul>
</li>
<li><a href="#news">&ensp;Legislative News&ensp;|</a>
   <ul>
      <li><a href="resources/">Resources</a></li>
      <li><a href="other.iphtml">Other</a></li>
   </ul>
</li>
<li><a href="#meetings">&ensp;Meetings&ensp;|</a>
   <ul>
      <li><a href="upcoming/">Upcoming</a>
      <li><a href="past/">Past</a>
      <li><a href="exhibitors.iphtml">Exhibitors</a>
   </ul>
</li>
<li><a href="findadoc/">&ensp;Find A Doc&ensp;|</a></li>
    </ul>
    </nav>
    <br /><br /><br /><br />
</div>
<!-- Page Content -->
<div id="mobilenavlink">Click <a href="#mnav">here</a> for site navigation</div>
<hr> 

<div id="footer">    
<br />
<p style="visibility:hidden;"><a id="mnav">Site Navigation</a></p>

<div id="footer">    
    <br />
<p style="visibility:hidden;"><a id="mnav">Site Navigation</a></p>
<div id="header2">
<nav id="mobilenav" role="navigation">
<a href="#mobilenav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>    
<li><a href="?about">&ensp;About&ensp;</a>
   <ul>
      <li><a href="mission/">Mission Statement</a></li>
      <li><a href="?history">History</a>
         <ul>
            <li><a href="first50/">First 50 Years</a></li>
            <li><a href="last20">Last 20 Years</a></li>
            <li><a href="recent/">2002 - Present</a></li>
         </ul>
      </li>
      <li><a href="map.pdf">District Map</a></li>
      <li><a href="board/">Board of Directors</a></li>
   </ul>
</li>
<li><a href="?members">&ensp;Members&ensp;</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="member_section.iphtml">Member Section</a></li>
      <li><a href="jobbank.iphtml">Job Bank</a></li>
      <li><a href="?newsletter">Newsletter</a>
         <ul>
            <li><a href="summer/">Current</a></li>
            <li><a href="newsletters/">Archived</a></li>
         </ul>
      </li>
      <li><a href="bylaws.doc">Bylaws</a>
      <li><a href="members/">Sign In</a></li>
      <li><a href="dues/index.iphtml">Pay Dues</a></li>
      <li><a href="forgotten_password.iphtml">Password Recovery</a></li>
      <li><a href="addresschange.iphtml">Change Account</a></li>
      <li><a href="links/">Subspecialty Groups</a></li>
   </ul>
</li>
<li><a href="?join">&ensp;Join&ensp;</a>
   <ul>
      <li><a href="benefits/">Member Benefits</a></li>
      <li><a href="join.pdf">Membership Application</a></li>
   </ul>
</li>
<li><a href="?news">&ensp;Legislative News&ensp;</a>
   <ul>
      <li><a href="resources/">Resources</a></li>
      <li><a href="Orthe.iphtml">Other</a></li>
   </ul>
</li>
<li><a href="?meetings">&ensp;Meetings&ensp;</a>
   <ul>
      <li><a href="upcoming/">Upcoming</a>
      <li><a href="past/">Past</a>
      <li><a href="exhibitors.iphtml">Exhibitors</a>
   </ul>
</li>
<li><a href="findadoc/">&ensp;Find A Doc&ensp;</a></li>
</ul>
</nav>
</div>

</div></div>

<script src="jquery.js"></script>
<script src="doubletaptogo.js"></script>
<script>
$( function()
   {
      $( '#mobilenav li:has(ul)' ).doubleTapToGo();
   });
</script>
</body>
</html>

CSS:

body {
  font-family: arial, sans-serif;
  text-align: left;
  background-color: #000000;
  background-image: url(./images/background.jpg);
  background-repeat: repeat-y;
  margin-top: 10px;
  margin-bottom: 10px;
}

table {
  background-color: #ffffff;
  border:double;
  border-width:4px;
  border-collapse:collapse;
  max-width:100%;
}

p {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

em {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

li {
/*  text-align: left; */
  font-family: arial, sans-serif;
}

hr {
/*  visibility:hidden; */
}

img {
  max-width:100%;
  height:auto;
}


/*MAIN THEME COMPONENTS*/
#wrapper {
  display: block;
/*  border: 1px #a2a2a2 solid; */
  width: auto;
  margin: 0; 
  padding: 0 15px;
}

#header {
  width:auto;
  margin-left: auto; 
  margin-right: auto;
/*  margin-left: 230px; 
  margin-right: 0; */
}


#mobilenavlink{
  display:none;
}


#main {
  margin: 10px auto 0 210px; 
  background-color: white;
  border: ridge 4px;
  border-radius: 4px;
  width: auto;
}

#content {
  width: auto;
  padding:  2%;
}

#content img{
  border:0;
}

#sidebar {
  float:left;
  width: 190px;
  color: white;
  font: bold 2em;
  margin-top: 0;
}

#sidebar img{
  border:0;
}

#delimiter {
  clear: both;
}

#footer {
  width: auto;
  background-color: #28377a;
  color: white;
}

/*ORIGINAL NAV STYLING FOR HEADER NAV */
#headernav {
  font-size: 20px;
  white-space:nowrap;
  float:left;
  margin-right:-999em;
}

#headernav ul ul {
  display: none;
}

#headernav ul li:hover > ul {
  display: block;
}

#headernav ul {
  background: #22629e;
  background: linear-gradient(to bottom, #CCE2F5, #22629e);
  /*  background: -ms-linear-gradient(top,  #CCE2F5 0%,#22629e 60%); */
  background: -moz-linear-gradient(top, #CCE2F5 0%, #22629e 60%);
  background: -webkit-linear-gradient(top, #CCE2F5 0%,#22629e 60%);
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 5px;
  border-radius: 4px;
  list-style: none;
  position: relative;
  display: inline-table;
  }

#headernav ul:after {
  content: "";
  clear: both;
  display: block;
}

#headernav ul li {
  float: left;
}

#headernav ul li:hover {
  background: #194976;
  background: linear-gradient(top, #22629e 0%, #112F4B 40%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 40%);
}

#headernav ul li:hover a {
  color: #ffffff;
}

#headernav ul li a {
  display: block;
  padding: 5px 0px;
  color: #eeeeee;
  text-decoration: none;
}

#headernav ul ul {
  background: #112F4B;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

#headernav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

#headernav ul ul li a {
  padding: 5px 5px;
  color: #fff;
}

#headernav ul ul li a:hover {
  background: #112F4B;
  background: linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 100%);
}

#headernav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/*NEW NAV STYLING FOR MOBILE/FOOTER NAV */
#mobilenav {
  font-size: 20px;
  white-space:nowrap;
  float:left;
  margin-right:-999em;
}

#mobilenav ul ul {
  display: none;
}

#mobilenav ul li:hover > ul {
  display: block;
}

#mobilenav ul {
  background: #22629e;
  padding: 0 5px;
  list-style: none;
  position: relative;
  display: inline-table;
}

#mobilenav ul:after {
  content: "";
  clear: both;
  display: block;
}

#mobilenav ul li {
  float: left;
}

#mobilenav ul li:hover {
  background: #194976;
  background: linear-gradient(top, #22629e 0%, #112F4B 40%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 40%);
}

#mobilenav ul li:hover a {
  color: #ffffff;
}

#mobilenav ul li a {
  display: block;
  padding: 5px 0px;
  color: #eeeeee;
  text-decoration: none;
}

#mobilenav ul ul {
  background: #112F4B;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

#mobilenav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

#mobilenav ul ul li a {
  padding: 5px 5px;
  color: #fff;
}

#mobilenav ul ul li a:hover {
  background: #112F4B;
  background: linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -moz-linear-gradient(top, #22629e 0%, #112F4B 100%);
  background: -webkit-linear-gradient(top, #22629e 0%,#112F4B 100%);
}

#mobilenav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

#mobilenav {
  font-size: 20px;
  white-space:nowrap;
}

#mobilenav ul ul {
  display: none;
}

#mobilenav > a {
  display: none;
}

#mobilenav li {
  position: relative;
}

/* first level */
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav > ul {
/*  height: 3.75em; */
}
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav > ul > li {
  width: 25%; 
  height: 100%;
  float: left;
}

/* second level */
/*COMMENTING ORIGINAL MOBILE NAV CODE
#mobilenav li ul {
  display: none;
  position: absolute;
  top: 100%;
}

#mobilenav li:hover ul {
  display: block;
}*/


/*MEDIA QUERIES BELOW*/
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* iPhone2G-4S */

  #sidebar {
    display: none;
  }

  #content {
    width: auto;
    padding: 2%;
    margin-left: 0px;
  }

  #wrapper {
    display: block;
    width: auto;
    margin: auto;
    padding: 0 15px;
  }

  #main {
    margin: 10px 0 0 10px;
    background-color: white;
    border: ridge 4px;
    border-color: #5b2542;
    width: auto;
  }

  #header2 {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    display:block;
  }

  #header {
    display:none;
  }

  #footer{
    height:auto;
  }

  #mobilenavlink{
    display:block;
  }

  /*MOBILE NAV TEST*/

  #mobilenav {
    display:block;
    position: relative;
    top: auto;
    left: auto;
  }

  #mobilenav > a {
    background-color: #e15a1f;
    position: relative;
  }

  #mobilenav > a:before,
  #mobilenav > a:after {
    position: absolute;
    border: 2px solid #fff;
    content: '';
  }

  #mobilenav > a:after {
    top: 60%;
  }

  #mobilenav:not( :target ) > a:first-of-type,
  #mobilenav:target > a:last-of-type {
    display: block;
  }

  /* first level */

  #mobilenav > ul {
    height: auto;
    display: none;
    position: absolute;
  }

  #mobilenav:target > ul {
    display: block;
  }

  #mobilenav > ul > li {
    width: 100%;
    float: none;
  }

  #mobilenav > ul > li > a {
    height: auto;
    text-align: left;
  }

  #mobilenav > ul > li:not( :last-child ) > a{
    border-right: none;
    border-bottom: 1px solid #000000;
  }

  /* second level */

  #mobilenav li ul {
    position: static;
    padding-top: 0;
  } 

  /*END MOBILE NAV TEST*/      
}

JS:

;(function( $, window, document, undefined )
{
$.fn.doubleTapToGo = function( params )
{
    if( !( 'ontouchstart' in window ) &&
        !navigator.msMaxTouchPoints &&
        !navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) )    
return false;

    this.each( function()
    {
        var curItem = false;

        $( this ).on( 'click', function( e )
        {
            var item = $( this );
            if( item[ 0 ] != curItem[ 0 ] )
            {
                e.preventDefault();
                curItem = item;
            }
        });

        $( document ).on( 'click touchstart MSPointerDown', function( e )
        {
            var resetItem = true,
                parents   = $( e.target ).parents();

            for( var i = 0; i < parents.length; i++ )
                if( parents[ i ] == curItem[ 0 ] )
                    resetItem = false;

            if( resetItem )
                curItem = false;
        });
    });
    return this;
};
})( jQuery, window, document );

The main header at the top works the way I want it to. But the code I used for the responsive nav came from a different styling, and I'm not sure how exactly to retrofit it. I've been coding for about half a year, so I know there are probably better ways to do some of these things, and I apologize in advance if my code is full of unnecessary redundancies. Thank you.

EDIT: here's a link to the site if this helps: http://vos.societyhq.com/ And I should add that I'll be adding media queries for other screen widths, but wanted to start out with (older)iPhone resolution, and get that working right first.

It should be great to make a jsFiddle of it next time. Here it is for now. — Brewal
– Brewal, Commented Aug 29, 2013 at 14:56
First of all, here's your HTML tidied up with better indentation (helps the readability of your code to indent), and with a couple repeated elements removed (you had <div id="footer"> and the opening p tag declared twice): jsfiddle.net/kF2TB Now back to your original question: what exactly is the problem? Clicking on a "sublink" takes you to its parent's href instead of its own href? — Trevan Hetzel
– Trevan Hetzel, Commented Aug 29, 2013 at 15:10
I'm having 2 issues so far: 1. The mobile nav is supposed to collapse into a single column, and the js is supposed to expand and collapse the submenus on a doubletap action for touch devices. But on iPhones a submenu link navigates to the parent menu link(I can't duplicate the behavior on a desktop or notebook). And less important: 2. If a submenu extends beyond the bottom of the footer, scrolling to it jerks the screen up and you have to get to it from underneath. — wes
– wes, Commented Aug 29, 2013 at 15:30

dartanian300 · Accepted Answer · 2013-09-25 15:45:11Z

1

Are you using JQuery?

If so, you can just call a function on click (or hover) and pass the id of the list you want to expand.

JQuery:

function showHideNav(elID){
    $("#" + elID).toggle();
}

HTML

<li onclick="showHideNav(dropdown1)">about
  <ul id="dropdown1">
    ...
  </ul>
</li>

answered Sep 25, 2013 at 15:45

dartanian300

2472 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Responsive Navigation not behaving as expected on Mobile Devices

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related