WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve Responsive Navigation Problem - won't collapse into button (8 posts)

  1. thebeeobee
    Member
    Posted 1 year 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... http://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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. thebeeobee
    Member
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. thebeeobee
    Member
    Posted 1 year ago #

    Thanks you!

  6. piriuser
    Member
    Posted 1 year ago #

    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!!

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  8. ericjherr1
    Member
    Posted 6 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic