WordPress.org

Ready to get started?Download WordPress

Forums

Hiero
[resolved] Mobile Navigation dropdown (8 posts)

  1. ColBrewer
    Member
    Posted 10 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

  2. ColBrewer
    Member
    Posted 10 months ago #

    Solved it with this line of css:

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

  3. primitiv
    Member
    Posted 10 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)

  4. ColBrewer
    Member
    Posted 10 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
    }

  5. leoabdala
    Member
    Posted 5 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.

  6. leoabdala
    Member
    Posted 5 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..

  7. ColBrewer
    Member
    Posted 5 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.

  8. Briesmi
    Member
    Posted 3 months ago #

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

    Thx!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.