Support » Themes and Templates » How to make open-close menu for mobile.

  • Hello!
    I made my own theme and am trying to make it look nice on the ios. Right now the navigation has three links and the third has two child links. When you tap the third link the child links drop down, but you can’t exit the drop down menu.
    I would like to make something like the open-close menu in the theme Responsive.

    Let me know if you would like to see code.


Viewing 5 replies - 1 through 5 (of 5 total)
  • Christine Rondeau


    Volunteer Forum Moderator

    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 ul {
      list-style: none;
      width: 100%;
      /*float: left;*/
    #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;

    Moderator Andrew Nevins


    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to make open-close menu for mobile.’ is closed to new replies.