Twenty Twelve Mobile Menu problem

  • Resolved cleverevans

    (@cleverevans)


    11 years, 2 months ago

    I’m working with a Twenty Twelve Child theme. The WIP site is here: curativeprojects.zippysites.com. On a mobile device, when the menu button is opened, the text from the main page content flows next to the column of menu items. You can see what I mean in this image here. The menu items are light gray, the offending leaking text is on the left, in black.

    I’ve tried adding the following media query:
    @media screen and (max-width:700px){

    #site-navigation {
    clear: both;
    }
    .main-navigation li{
    clear: both;
    }
    }
    But it’s not working. I’d like to keep the main page content down below the rolled-out menu. How do I accomplish this?

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

  • In current child theme stylesheet, delete(remove) this

    .header-image {
     margin-left: 0.714286rem;
     margin-top: 0.714286rem;
}

    and remove this too

    .main-navigation {
     float: right;
     margin-right: 100px;
}

    Then add this somewhere down below

    .site-header { overflow: hidden; }
.header-image { display: block; margin: 0 auto; }

@media screen and (min-width: 600px) {
	.main-navigation { float: right; margin-right: 100px; }
	.header-image { display: inline-block; margin: 10px 0 0 10px; }
}
    Thread Starter cleverevans

    (@cleverevans)

    Magnificent! Worked like a charm. Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Twenty Twelve Mobile Menu problem’ is closed to new replies.