Mobile Navigation dropdown

  • Resolved ColBrewer

    (@colbrewer)


    10 years, 7 months ago

    Hi I’m using the Hiero theme and I’m having trouble with the mobile navigation. In my menu there are 3 main links and there should be a dropdown when hovering over 2 of the links. The dropdown is visible but only partially.

    The problem lies with this bit of css – the overflow: hidden.

    #main-navigation > .sf-menu > ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    background: #0d2530;
    width: 100%;
    overflow: hidden;
    }

    You can see the problem http://inkyhands.co.uk/ at mobile view.

    Thanks in advance,

    Col

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter ColBrewer

    (@colbrewer)

    10 years, 7 months ago

    Solved it with this line of css:

    #main-navigation:target > .sf-menu > ul {
    overflow:visible
    }

    primitiv

    (@primitiv)

    10 years, 7 months ago

    I’m having the same problem. I’ve tried adding overflow:visible; under #main-navigation:target > .sf-menu > ul {} but no luck. it’s really cut off and bad. Any other suggestions?

    karasurbandayspa.com (mobile view)

    Thread Starter ColBrewer

    (@colbrewer)

    10 years, 6 months ago

    Add these classes to your mobile view css

    #main-navigation {
    float: none; <—-add this attribute – this will align the menu to the center
    }

    #main-navigation > .sf-menu {
    position: relative;
    text-align: left;
    z-index: 10000; <—-add this attribute – this will bring the menu to the front from behind any images
    }

    leoabdala

    (@leoabdala)

    10 years, 2 months ago

    Hi, I’m having the same problem on my website http://coolforus.com/ on the web it’s OK but when you see it on mobile it’s wrong, the website os weird and just showing until the half of the mobile page, not only on my phone, you can check it. Please can someone help me? i’ve tried the last answers but it didn’t work.

    leoabdala

    (@leoabdala)

    10 years, 2 months ago

    Hi, I’m having the same problem on my website http://coolforus.com/ on the web it’s OK but when you see it on mobile it’s wrong, the website os weird and just showing until the half of the mobile page, not only on my phone, you can check it. Please can someone help me? i’ve tried the last answers but it didn’t work..

    Thread Starter ColBrewer

    (@colbrewer)

    10 years, 2 months ago

    try adding: initial-scale=1 to your meta tag so it reads…

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    See if this helps.

    Briesmi

    (@briesmi)

    10 years ago

    Good job ColBrewer! Which font do u use? Looks good.

    Thx!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Mobile Navigation dropdown’ is closed to new replies.