Responsive Menu Doesn't Collapse & Site Header Doesn't Resize

  • Hi all,

    I would be so grateful if someone could help me find the problem in my code that’s causing the following problems on the mobile version of this https://www.susanchi.com, which is based on Twenty Twelve, using a child theme.

    1) The menu button isn’t flush to the top and doesn’t collapse.
    2) The site header text doesn’t resize.

    I’m confused because I’ve done other sites using this theme and it’s worked fine.

    Thanks so much.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter pennywhistle

    (@pennywhistle)

    With the help of a friend, I fixed the menu so that it now collapses by changing “block” to “none” in the following code

    .main-navigation ul.nav-menu,  .main-navigation div.nav-menu > ul {
display:  block;
text-align:  center;
width:  100%;
}

    Unfortunately the menu still doesn’t work, and the nothing is resizing.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So it doesn’t work because you moved it behind your logo?

    Thread Starter pennywhistle

    (@pennywhistle)

    I’m not sure what you mean. I didn’t intentionally, of course. Can you tell me how to fix it? Also, why isn’t the header “susan chi” resizing?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Responsible CSS:

    /* Navigation Menu */
.main-navigation {
margin-top: -20px;
margin-bottom: -40px;
}

    Thread Starter pennywhistle

    (@pennywhistle)

    I tried setting the margin-top to 0, but it didn’t fix the problem: the responsive menu doesn’t expand and the “logo” doesn’t resize. Someone else who is trying to help me out said the following, but I’m not sure how to make the fix:

    Your menu is wrapped in this div:

    <div class="menu-menu-1-container">

    The Twenty Twelve theme’s menu is wrapped in this div:

    <div class="nav-menu">

    The Jquery for the collapsible menu should be looking for the nav-menu class.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive Menu Doesn't Collapse & Site Header Doesn't Resize’ is closed to new replies.