WordPress.org

Ready to get started?Download WordPress

Forums

How to make open-close menu for mobile. (6 posts)

  1. Frisby
    Member
    Posted 1 year ago #

    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.

    Katie

  2. 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.

  3. Frisby
    Member
    Posted 1 year ago #

    Thanks, I will see if I can implement tinynav.

  4. Frisby
    Member
    Posted 1 year ago #

    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;
      }
    }
  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post a link to your site?

  6. Frisby
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic