How to make open-close menu for mobile.

Responsive uses Tinynav.js ( I think). If not it’s very similar and I’ve used this in lots of stuff.
You should check it out, it works really well.

Thanks, I will see if I can implement tinynav.

I’m trying to adapt the advanced demo from here to work with my layout. I tried taking the css directly from it, but that didn’t work. Replacing the float:left;s with display:inline;s or (removing them) allows the open/close button to work, but the links/lis no longer change depending on the window size.

Here’s all the code I altered the float:left;s in.

#nav,
#nav ul {
  list-style: none;
  width: 100%;
  /*float: left;*/
  background:#02254F;
}

#nav li {
  /*float: left;*/display:inline;
  width: 100%;
}

#nav a {
  color: #fff;
  text-decoration: none;
  width: 100%;
  /*float: left;*/display:inline;
}

@media screen and (min-width: 40em) {
  #nav a {
    margin: 0;
    padding: 1em;
    /*float: left; */display: inline;
    text-align: center;
  }
}

Can you post a link to your site?

I’ve been working on the site locally, but I’ve uploaded it here. The host won’t let me log in and add links to the nav, but the finished site will have three links in the nav, the third one with .sub-menu drop down links. The drop downs seem to be messed up by the responsive code.

I managed to get the website nice looking on an ipod touch using a separate stylesheet for mobile devices. However the nav still doesn’t move out of bar form when you resize the window on a regular computer, and I suspect it might be messed up like that on the ipad too.

My stylesheets are here: style.css mobile.css base.css screen.css

Responsive stylesheet: here

The stylesheets I was using before implementing responsive nav are stashed here: style.css mobile.css base.css screen.css