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]
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)
******************************************************************/
@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!
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; }
}
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 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.
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 :)!
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!
