Support » Theme: Media Maven » "Mobile" dropdown menu "stuck open" on iPad display

  • Resolved DougJoseph


    The CSS that oversees the display of iPad views of the site is found under:

    @media screen and (max-width: 768px)

    Whenever I view the site on this device / under this CSS, the “mobile” (simplified dropdown version) menu is always “stuck open!”

    When I view the site on an iPhone (based on a different CSS) the menu displays closed as expected, and drops down when clicked, as expected.

    Below is the “default” CSS. Can anyone either help me to get the menu to “close”?

    Thanks in advance!

Viewing 10 replies - 1 through 10 (of 10 total)
  • CSS for the display showing on iPad:

    @media screen and (max-width: 768px) {
    	#content {
    	#access, { position:relative; width:100%;}
    	.menu ul li { list-style-type: none; float:none; }
    	nav[role=navigation], ul {
    	nav[role=navigation] .menu #menu-icon { display:block }
    	header[role=banner] #searchform  { top:6px; right:10px }
    	.menu ul li:hover ul { left:-9999em; }
    	header[role=banner] #s {
    		background:url(library/images/icon-search.png) no-repeat 5px 4px #fff;
    		padding:4px 5px 4px 26px;
    		border:1px solid #fff;
    		box-shadow:3px 3px 5px #777 inset;
    	#main.col620 {
    	#sidebar.col300 {
    	.widget {
    		margin:2.2em 0 0 20px;

    [Stop bumping your thread]

    Hi Doug – I’ve never used this theme, but installed it on a test site to see if I could see what’s going on. I’m not totally sure I found the problem – but this seems to work on my site/iPad.

    Almost at the bottom of the style.css file, comment out the first piece here:

    @media screen and (min-width: 768px) {
    	nav[role=navigation], ul { display:block !important; }
    @media screen and (max-width: 1382px) {
    /* insert styles here */
    (Handled by default, but if you want to edit it, feel free)


    Wow! What a wizard you are!

    I did that and it worked!

    Now my only challenge is how to incorporate that change into the Child Theme permanently so I won’t lose my change every time I update the parent theme.

    Any ideas on that?

    Thank you again for being so helpful! Amazing!

    Does anyone know the CSS statement needed to have a child theme “counteract” a CSS statement such as the following in the parent theme?

    As far as I can tell, the elements in question were already set to “display:block” … so I don’t understand why this statement would cause the drop down menu to lock in a “dropped-down” state. ???

    @media screen and (min-width: 768px) {
    	nav[role=navigation], ul { display:block !important; }

    Does anyone know the CSS statement needed to have a child theme “counteract” a CSS statement such as the following in the parent theme?

    Hi Doug – I looked at this a few times and couldn’t find a solution – I’ll try again – but can you post a link to your site?

    The CSS solution (posted above) to fix the original problem, works! However, what I now need is either for the fix to be incorporated into the theme by its owner, or else a way for my child theme to counteract the explicit CSS statement that is causing the issue, so that future updates won’t reinfect my site with the problem. As of now, as a temporary hack, I’ve edited the main theme to correct it.

    Because I’ve edited the main theme, the problem no longer shows on my site. You can see the site at

    The only remaining need is a way for a child theme to counteract (nullify) an explicit CSS statement in the main theme. There may be a way. Not sure.

    Yep, agree that generally there is a way, but when I played around with this on my test site, I could not get it to work with the usual “counteracting” code (often would be “display: none;” or “display: inline” or possibly something else). I was thinking it might be a mistake in the theme’s CSS.

    So, I just looked at the theme page – and there’s a recent update that seems to have changed that CSS:

    @media screen and (min-width: 800px) {
    	nav[role=navigation], ul { display:block !important; }

    You could try changing it to that and/or update the theme – ALWAYS make a backup before doing updates :)!

    Thanks! Will try to set aside some time to look at this soon. In the meantime, I will go ahead and mark this ‘resolved.’ Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘"Mobile" dropdown menu "stuck open" on iPad display’ is closed to new replies.