My dropdown menu works fine normally - http://imgur.com/Ljodw0J
But is covered by widgets on mobile - http://imgur.com/1AyGiaS
And is even covered by the chart on mobile - http://imgur.com/dpoOmai
Shouldn't they render the same?? AND what could be the source of the problem? and how can I fix this issue?
Details
Some styling details:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
}
NOTES
There is no z-index on the overlapping elements.
The entire content of the page has a snap-content class which sets the z-index: 2;. This is to let me use the snap.js plugin.
Yes, they should, but it's not uncommon that they don't. This is why cross-platform HTML, JS and CSS is such a PITA, and why, if you're good at it you print money.
Related
I want to display a link in a mobile menu that is hidden in the regular page navigation. I removed the “Home” navigation link
<li id="home-menu">HOME </li>
from the regular webpage view in styles.css Line 60, using an alternative to display:none, discussed here: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont.
#home-menu {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Now, I want to enable the "Home" link in the mobile menu list. On Line 176 of styles.css, I tried to display #home-menu,
#home-menu {
display: inline-block;
}
but it will not show in the responsive menu. I am really trying to avoid using !important. I would appreciate learning how to resolve this. My example is at http://nspowers.org/ask/display/
You have a lot going on here, so without going into too much detail I'll suggest a cleaner alternative:
Remove the absolute positioning and its associated rules and instead use display: none; to hide #home-menu initially - then add display: block; at the mobile break point to have it re-appear:
header#topnav nav ul li#home-menu {
display: none; /* Also remove the !important rule from here */
/* position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; */
padding: 0; border: 0;
}
To have home re-appear for smaller devices:
#media only screen and (max-width: 579px) {
header#topnav nav ul li#home-menu {
display: block;
}
}
This seems like a simpler more maintainble solution, plus you won't need to override so many rules.
Read up on selector specificity if you're confused about how it works - see: http://www.w3.org/TR/css3-selectors/#specificity, http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more.
You're clipping it and have a height and width of 1px, so you need to override these properties as well:
#topnav nav ul li {
float: none;
margin: 0;
clip: auto; //reset clip to not clip
height: auto; //allow height to expand
width: 100%; //matches rest of menu elements
position: relative; //allow to flow above rest of elements instead of overlap first one
}
You also have this at line 117, which is overriding your display: inline-block because of the specificity of the selectors you are using. You can see this in the developer tools:
#topnav nav ul li {
display: block;
float: left;
font-size: 1.7em;
margin-right: 30px;
}
I have a Twitter Bootstrap based Website with some strange issues on regular old link buttons (like this: http://jsfiddle.net/RK3RC/)
HTML
<a class="button" href="http://jsfiddle.net/">Click Me</a>
CSS
.button {
background-color: #bc4b4e;
color: #ffffff;
display: block;
border-radius: 45px;
border: none;
text-decoration: none;
position: absolute;
font-size: 18px;
padding: 14px 50px;
margin: 0px;
border-width: 0px;
line-height: 20px;
white-space: nowrap;
min-width: 0px;
min-height: 0px;
-webkit-transform: rotate(0deg);
opacity: 1;
left: 220px;
top: 20px;
visibility: visible;
}
.button:hover {
background: #d35559;
}
The buttons work absolutely fine and as expected in desktop browsers, but are not responsive in mobile browsers (touch devices). If you click them through touch, nothing happens - the buttons are non-responsive. However, interestingly, if the link is to an anchor tag on the same page, it will work (just not to an outside page).
Any thoughts/suggestions? I've scoured the Web but haven't found people with the exact same issue, which is a bit odd in itself.
Ok, got it figured out.
It was actually because there was a JQuery-based slider, on a different part of the page, that had a touchenabled setting (which allows the user to go through the slider by swiping). This was affecting the button's response to touch. Once that touch setting was turned off, the buttons everywhere respond as normal.
Thanks for all the help and suggestions. You guys rock.
I have a some drop-down menus set up here: http://emgraphics.net/sokoleye_wp The problem is they only work sporadically - three out of four times I can't click on a link and the menu disappears. However, there isn't any pattern - no page where it works regularly (or doesn't), no particular menu/link that does or doesn't work, sometimes it works on the first try, sometimes not at all until I switch pages. The problem seems consistent across browser/platform (I tried a bunch of options in Browserstack). Even IE follows the pattern! These are just a standard menu set up in WordPress. I assume there must be some css somewhere that is interfering, or something with the random images in the header? But why wouldn't it just stay broken/non-functional (or not)? Any idea what I am missing here? thanks!
For me (Chrome Version 26.0.1410.64 m) there is a gap between the menu items and the drop-down list. When the cursor hits this gap it is not in a hover state over the button or the list, causing the list to disappear.
Try changing the CSS for #access ul ul to:
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding-top: 4px;
}
..that should fix the issue.
You could add a border top to the above example if you still want to have the visual effect of a gap. Replace your existing CSS for the element below and it should fix your problem.
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
border-top:4px solid #7C7461;
}
Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My CSS:
#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}
#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/* border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}
#overlaymatte {
background: none;
}
My HTML
<div id="fixedoverlay">
<div id="overlaymatte"></div>
<div id="overlaycontent">
<div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p></div>
</div>
</div>
Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
function popUpOverlay(){
$('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
$('#overlaycontent').append(loaderimg);
$('#loaderimg').show();
$(window).keydown(function(e){
if(e.keyCode == 27) {
$('#fixedoverlay').remove();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.
So this is our website http://www.greeceinsiders.com
if you resize the window you will see that the menu at the top-right gets out of the top-bar and it is ugly. How can I fix that? Can I play with the position of the list?
Bonus: If anyone visits Greece he gets a free experience for helping us! :)
An easy fix is making the following changes in your CSS:
#top-bar > .menu {
color: #FFFFFF;
/* float: right; */ /*float: right removed */
height: 48px;
margin-right: 40px;
width: 490px;
position: absolute; /* these are new additions */
right: 0;
top: 0;
}
It's the pageTitle element that's causing it to get out of shape.
It seems like an empty element - can you just remove it?