WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am working with a child of Twenty Twelve. I made my own images to act as menu li backgrounds. When I reduce the screen width by moving my browser window in, the menu items seem to toggle automatically. I have never fiddled with any of the CSS or JS for this behavior. The resulting dropped-down list overlays the other menu items and makes them unreadable. Not to mention, I don't want the behavior in the first place.

Is there such thing as auto-toggling?

share|improve this question
This is a little confusing, could you provide URL to live site exhibiting your issue? Also note that if it's generic enough CSS/JS thing it is better asked at Stack Overflow. – Rarst Jun 25 '13 at 20:54
www.efficiencyofmovement.com – Josh Smith Jun 25 '13 at 21:41
up vote 0 down vote accepted

This is most likely the default behavior for Twenty Twelve; responsive for small screens and thus stacking elements on the page, including the contents of your nav, #site-navigation.

Let's looks at the nav section in the default TT theme:

<nav id="site-navigation" class="main-navigation" role="navigation">
  <h3 class="menu-toggle">Menu</h3>
    <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
    <div class="nav-menu">
       <ul class="nav-menu">

         <!-- More stuff below: li items, closing /ul, /div /nav tags-->

Basically, following a mobile first design philosophy, TT by default hides ul.nav-menu (display: none). Through the use of media queries it makes it visible for screens that have a minimum width of 600px. Through jQuery by clicking on .menu-toggle it adds an additional class of .toggled-on to ul.nav-menu to make it visible.

 // TT style.css lines 597 to 604
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
   display: none;
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
   display: inline-block;

// 1421
@media screen and (min-width: 600px) {

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

In your childtheme, you have overridden the default display: none styles for .nav-menu so it's visible at all screen sizes.

For a simple fix I would try to do something like this:

// Basically adding a media query to float your menu li elements when small screen using TT's breakpoint for small screens of 600px 
@media screen and (max-width: 599px) {
   .main-navigation li {
      float: left
   ul.children {
      //hide the secondary links from displaying
share|improve this answer
tnog, This solved exactly what I was asking. Thank you. I added some functionality with a ':hover' pseudo element to the ul.children element. It brought back the functionality that I wanted but alas it still doesn't look right, for me at least. – Josh Smith Jun 26 '13 at 3:13
You're welcome. Considering that mobile is becoming an overriding trend I'd consider, rather than fighting against the functionality of the default mobile menu, of just incorporating it into your existing design. Maybe use the same media queries to present your existing design for larger screens and the mobile menu for small displays? But, of course, it's your design and your UI philosophy. – tnog Jun 26 '13 at 18:56

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.