Twenty Twelve Responsive Navigation Problem – won't collapse into button

  • Resolved TechHaus

    (@thebeeobee)


    11 years, 9 months ago

    Hi there.

    I’ve created three sites recently, making child themes for Twenty Twelve.

    In all three cases, when viewed on mobile (or a small viewport), the menu is not collapsing into the menu button. The button is appearing but the menu is remaining where it previously was.

    In all three cases, I used One-Click Child Theme to create the child theme. Two of them have no other plugins installed.

    Here is an example of one of the sites that is failing… https://leafrankdesign.com.s81743.gridserver.com/lea/

    Can someone help me fix the menu so it collapses properly?

    Also, I did create/name a menu and assign it as the primary menu, so that isn’t the problem.

    Any help would be appreciated! I’ve google the problem and I can’t find any other people with this issue.

    Thanks!

    Bob

Viewing 7 replies - 1 through 7 (of 7 total)

  • That seems to be related to this CSS code you added to your child theme stylesheet:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 0px solid #EDEDED;
    border-top: 0px solid #EDEDED;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}

    I commented it out and the menu behaved.

    Thread Starter TechHaus

    (@thebeeobee)

    Wow, you’re right!

    The only thing I changed with that was making the border-bottom and border-top 0px to remove those lines. Why would that break the navigation?

    Also, is there any way to remove those lines and make it still work?

    Thank you so much for looking and your help.

    In the parent theme, that CSS is inside a media query – this one:

    /* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

    So by using it outside a media query – it applies that CSS to small devices – hence the problem.

    Note that twentytwelve is “mobile first” so the media queries are for larger screens — opposite of many themes.

    Thread Starter TechHaus

    (@thebeeobee)

    Thanks you!

    I have (I think) a similar problem.
    I’ve created a main menu in the widgets area and it works fine, but when I see the blog in mobile, the menu doesn’t display (drop down)…
    I haven’t changed anything about navigation in my child style… Anybody can help? Thank you!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi piriuser,
    If you cannot resolve the issue with the solutions provided by this thread, it is likely you are not experiencing a similar problem.

    You should then create a new thread and discuss your issue.

    Okay so how do you put a media query in the child theme to get it to use a different CSS?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Twenty Twelve Responsive Navigation Problem – won't collapse into button’ is closed to new replies.