Support » Themes and Templates » Hiero » Mobile Navigation dropdown

  • Resolved ColBrewer

    (@colbrewer)


    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)
  • Solved it with this line of css:

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

    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)

    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
    }

    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.

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

    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.

    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.