WordPress.org

Forums

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

  1. abubu
    Member
    Posted 3 years 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. abubu
    Member
    Posted 3 years ago #

    URL is royalsporting . it

  3. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

  4. abubu
    Member
    Posted 3 years 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 Nevins
    Forum moderator
    Posted 3 years ago #

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

  6. abubu
    Member
    Posted 3 years 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 Nevins
    Forum moderator
    Posted 3 years ago #

    In your Child Theme stylesheet, add this;

    @media screen and (min-width: 600px) {
     .main-navigation li {
      margin-top: 24px;
     }
    }
  8. abubu
    Member
    Posted 3 years 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 Nevins
    Forum moderator
    Posted 3 years ago #

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

  10. abubu
    Member
    Posted 3 years 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 Nevins
    Forum moderator
    Posted 3 years 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. abubu
    Member
    Posted 3 years 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. abubu
    Member
    Posted 3 years ago #

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

  14. gbicket
    Member
    Posted 3 years 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