WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] mobile menù gone crazy (14 posts)

  1. l736k
    Member
    Posted 1 year ago #

    hi, can't understand why but my mobile menù (the one you obtain when clicking on the button if the window is too tight) is gone crazy when i use my child theme. i must have touched something in the child css but can't understand what. there's no space between the links and they are not centered. can someone take a look at it?

  2. l736k
    Member
    Posted 1 year ago #

    URL is royalsporting . it

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

  4. l736k
    Member
    Posted 1 year ago #

    that is correct, if you resize the window until the mobile theme starts working, if you open it you will see the issue

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    How should it be? Like this http://awesomescreenshot.com/0e414acu71 ?

  6. l736k
    Member
    Posted 1 year ago #

    actually yes...how did you do?
    also, is there a way to collapse sub-pages? otherway as you can see it will use a lot of space...

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    In your Child Theme stylesheet, add this;

    @media screen and (min-width: 600px) {
     .main-navigation li {
      margin-top: 24px;
     }
    }
  8. l736k
    Member
    Posted 1 year ago #

    not working...

    please note that i have this rule in the child css:

    .main-navigation li {
        margin: 0 1.85714rem 0 0;
    }

    i need it as there are a lot of voices and ther's too much space between them...

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try replacing 'min' with 'max' in my code.

  10. l736k
    Member
    Posted 1 year ago #

    hi, i solved this way thanks:

    @media screen and (max-width: 599px) {
    	.main-navigation li {
    		margin-top: 5px;
    	}
    }
    @media screen and (min-width: 600px) {
    	.main-navigation li {
    		margin: 0 1.85714rem 0 0;
    	}
    }

    now, what about collapsing the sub-pages? is there anything to do?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    You'll probably need to make some jQuery to hide the submenu by default, then, once a <li> (that has a menu) is pressed, toggle the submenu:

    jQuery(document).ready(function($){
     $('.main-navigation li ul').hide();
     $('.main-navigation li').has('ul').click(function() {
      $(this).children().toggle();
     });
    });
  12. l736k
    Member
    Posted 1 year ago #

    that's it!! you're amazing!! :)
    but if i include it in the header, the standard submenu won't work anymore...how to call it only when the mobile menu enter?

  13. l736k
    Member
    Posted 1 year ago #

    hi, i can't find a solution elsewhere...could you please help me?

  14. gbicket
    Member
    Posted 1 year ago #

    I am also interested in knowing if there is a way to collapse the submenu pages on the mobile menu of twenty-twelve. Otherwise the list of pages and subpages can get very long and not user-friendly. I see that the code Nevins posted above is supposed to do this(create collapsible submenus when the mobile toggle menu is toggled on) but I am not sure where I would add it. I do not know why it is so hard to get a straight, understandable answer to this question when it is such an obvious need of the twenty twelve theme.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic