Thread Starter
abubu
(@l736k)
URL is royalsporting . it
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
abubu
(@l736k)
that is correct, if you resize the window until the mobile theme starts working, if you open it you will see the issue
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
abubu
(@l736k)
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In your Child Theme stylesheet, add this;
@media screen and (min-width: 600px) {
.main-navigation li {
margin-top: 24px;
}
}
Thread Starter
abubu
(@l736k)
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try replacing ‘min’ with ‘max’ in my code.
Thread Starter
abubu
(@l736k)
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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();
});
});
Thread Starter
abubu
(@l736k)
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?
Thread Starter
abubu
(@l736k)
hi, i can’t find a solution elsewhere…could you please help me?
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.
