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
display:none;
}
}