My nav bar sub-items are way off when on mobile device

Community Forums Forums Design Tips and Tricks My nav bar sub-items are way off when on mobile device

This topic is: not resolved

This topic contains 12 replies, has 4 voices, and was last updated by  Marcy 8 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #79937

    jamiealexander
    Participant
    Post count: 2

    I’m not sure if anyone has had this problem in Sixteen Nine, but I would love if you could take a look to see if you can work out what is wrong.

    My site is lucidability.com

    The nav menu is fine in full-screen mode.

    When I minimize browser or look from tablet/phone the sub-items in the nav bar are way off. The boxes appear at the far right and it’s impossible to click on them before they disappear.

    Cheers

    http://lucidability.com
    #80254

    Marcy
    Participant
    Post count: 383

    You have this line in you style.css

    
    .genesis-nav-menu .sub-menu {
        border-top: 1px solid #333333;
        margin: -51px 0 0 240px;
    }

    The 240px is what is doing it.

    That line is usually only for .sub-menu .sub-menu, so that the second .sub-menu will appear right next to the first .sub-menu. You need it when your menu is on the side, but try making the the left margin (240px) a smaller number at the screen size when the navigation goes across the top.


    #81205

    Harley130
    Participant
    Post count: 21

    I’m having the same problem on my sixteen nine themed site oldrailroadbridge.org

    Marcy, when you state making the 240px a smaller number are you suggesting to make the 240px number smaller in the code snippet above, or placing it in the media group code within the smaller screen size snippets?

    #81311

    Marcy
    Participant
    Post count: 383

    I set up Sixteen Nine Pro and tested it, and I can’t reproduce what your theme is doing with the menu. Mine works exactly as in in the demo. There is no gap between the parent menu item and the sub-menu drop down.

    http://my.studiopress.com/themes/sixteen-nine/#demo-full

    http://my.studiopress.com/themes/sixteen-nine/#demo-phone

    Some questions:
    Perhaps downloading Sixteen Nine Pro it again would help. (You would need to add any customizations again. Make changes a little at a time, and view the page to see if anything affects the menu.)

    How are you setting up the menu? Do you add the Custom Menu widget to the Header Right widget area under Appearance > Widgets?

    In style.css, in the section

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

    there should be this section:
    .genesis-nav-menu .sub-menu {
    margin: 0;
    }

    That will override the margin line in the main section for
    .genesis-nav-menu .sub-menu {
    border-top: 1px solid #333333;
    margin: -51px 0 0 240px;
    }

    But that seems to already be in your style.css; it’s just not overriding for some reason.


    #81364

    Marcy
    Participant
    Post count: 383

    You can try adding !important to:

    .genesis-nav-menu .sub-menu {
         margin: 0;
    }

    in
    @media only screen and (max-width: 1279px) {

    I don’t like suggesting it, but I’m not able to find the line that’s overriding it right now.
    Be sure to check that the menu still works in the sidebar when you do that.

    If you’re using a Custom CSS editor, maybe the margin: 0 line is overridden there.


    #81710

    Harley130
    Participant
    Post count: 21

    Thanks Marcy, I added the !important as you suggested above and it fixed the problem. I’ve looked through the .css sheets to see if it there is an over ride on the original css and do not see any other reference to the .genesis-nav-menu .sub-menu

    I am using the Genesis Extender plugin on this site but I couldn’t find anything that was affecting .genesis-nav-menu .sub-menu in it either.

    So, for right now I’m going to stick with your suggested fix and keep looking.

    Again, thanks for taking your time and looking through the stylesheet and for your suggested fix.

    #81766

    Marcy
    Participant
    Post count: 383

    I’m glad it worked for you.


    #95892

    MarkP
    Member
    Post count: 27

    Hi Marcy,

    I’m having a similar problem, the mobile hamburger nav doesn’t show. I’ve added your suggestion of important on the mobile css as above, but nothing changes. I totally lose the menu once the browser reaches a small size. If you see this post could you look at katepetley.com and see if you’re able to determine why this is not showing the hamburger?
    Thanks,
    Mark

    #95894

    MarkP
    Member
    Post count: 27

    OK, figured this out. CSS issue with the original #fff color for the black background. Resolved now.

    #95900

    Marcy
    Participant
    Post count: 383

    Yes, it was the color of the icon. And it’s a dashicon, not the HTML character, as in the earlier version that Harley was using.


    #95901

    Marcy
    Participant
    Post count: 383

    Well, I don’t see the icon still, so look for this section:

    #responsive-menu-icon:before {
        color: #FFFFFF;
        content: "";
        font: 24px/1 'dashicons';
        margin: 0 auto;
    }

    and change
    color: #ffffff;"
    to
    color: #565657;


    #95916

    MarkP
    Member
    Post count: 27

    Hi Marcy,
    Thanks for the reply… Sorry, was working everything out in sandbox first so the code changes weren’t live until a few minutes ago. Thanks again for the help! Much appreciated.
    Mark

    #95922

    Marcy
    Participant
    Post count: 383

    Yes. Of course. I’m glad it worked out for you,


Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.