Grow your CSS skills. Land your dream job.

Navigation menu not working in Google Chrome (Android)

  • # March 29, 2013 at 1:31 pm

    http://softpeakscakery.com

    My navigation menu is working in every browser I have tested EXCEPT Google Chrome on Android. It _looks_ alright, however, none of the links work. If I click on one of the links, the dropdown menu closes, and it doesn’t go to any of the pages.

    I have a feeling that it has to do with the absolute positioning, because if I long press the link, it asks me if I want to save the image, and the link drops down directly over an image. Every other browser asks me if I want to open up the link in a new tab. Is there anyone who can take a look and throw up some advice?

    here is the CSS code:

    @media screen and (max-width: 639px){

    .region.region-main-menu ul{
    display: block;
    @include push(3);
    @include span-columns(4, 8);
    }

    .nav {
    position: relative;
    min-height: 40px;
    }
    .nav ul {
    //z-index: 100;
    position: absolute;
    margin: 0;
    padding: 5px 0;
    top: 0;
    left: 0;
    border: solid 1px #aaa;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .nav li {
    display: none; /* hide all

  • items */
    margin: 0;
    }
    .nav .first {
    display: block; /* show only current
  • item */
    }
    .nav a {
    display: block;
    padding: 5px 5px 5px 32px;
    text-align: left;
    width: 50%;
    }
    .nav .first a {
    background: none;
    color: #666;
    }

    /* on nav hover */
    .nav ul:hover {
    background-image: none;
    }
    .nav ul:hover li {
    display: block;
    margin: 0 0 5px;
    }

    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".