WordPress.org

Ready to get started?Download WordPress

Forums

Media Maven
[resolved] "Mobile" dropdown menu "stuck open" on iPad display (11 posts)

  1. DougJoseph
    Member
    Posted 1 year ago #

    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!

  2. DougJoseph
    Member
    Posted 1 year ago #

    CSS for the display showing on iPad:

    @media screen and (max-width: 768px) {
    	#content {
    		background:#fff;
    	}
    	#access, div.menu { position:relative; width:100%;}
    	.menu ul li { list-style-type: none; float:none; }
    	nav[role=navigation] ul.menu, div.menu ul {
    		background:#999;
    		position:absolute;
    		top:41px;
    		z-index:9999;
    		display:none;
    	}
    	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 {
    		font-size:1em;
    		background:url(library/images/icon-search.png) no-repeat 5px 4px #fff;
    		padding:4px 5px 4px 26px;
    		border-radius:7px;
    		border:1px solid #fff;
    		box-shadow:3px 3px 5px #777 inset;
    		min-width:150px;
    	}
    
    	#main.col620 {
    		width:100%;
    		display:block;
    	}
    
    	#sidebar.col300 {
    		float:none;
    		display:block;
    		width:100%;
    		clear:both;
    	}
    
    	.widget {
    		margin:2.2em 0 0 20px;
    	}
    }

    [Stop bumping your thread]

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.menu, div.menu ul { display:block !important; }
    }
    */
    
    @media screen and (max-width: 1382px) {
    /* insert styles here */
    }
    
    /******************************************************************
    PRINT STYLES
    (Handled by default, but if you want to edit it, feel free)
    ******************************************************************/
  4. DougJoseph
    Member
    Posted 1 year ago #

    @WPyogi

    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!

  5. DougJoseph
    Member
    Posted 1 year ago #

    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.menu, div.menu ul { display:block !important; }
    }
  6. DougJoseph
    Member
    Posted 1 year ago #

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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  8. DougJoseph
    Member
    Posted 1 year ago #

    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.

  9. DougJoseph
    Member
    Posted 1 year ago #

    Because I've edited the main theme, the problem no longer shows on my site. You can see the site at http://whitestonepublishing.com

    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.

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.menu, div.menu ul { display:block !important; }
    }

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

  11. DougJoseph
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic