My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.
this is the test page
Here is HTML:
<li class="dropdown">
<a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Manitoba</li>
<li>New Brunswick</li>
<li>Newfoundland and Labrador</li>
<li>Nova Scotia</li>
<li>Nunavut</li>
<li>Ontario</li>
<li>Prince Edward Island</li>
<li>Quebec</li>
<li>Saskatchewan</li>
</ul>
</li>
Here is CSS:
.dropdown-menu {
left: 40% !important;
margin-left: -30px;
z-index: 50;
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
margin-left: 15px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
Other CSS with z-index that I'm not sure if it is affecting it:
nav {
padding: 0;
position:relative;
z-index:10;
height: 0;
}
.showMenu {
display: block;
background: url() no-repeat center;
background-size: 48px 48px;
height: 80px;
right: 0;
top: 0;
text-indent: -999999px;
font-size: 0;
position: absolute;
z-index:11;
border-left: 1px solid #DDDDDD;
}
the problem isnt z-index problem the real problem is your header, just change
header {
width: 100%;
height: auto;
background: #FFFFFF;
overflow: auto;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: 2%;
}
To
header {
width: 100%;
height: auto;
background: #FFFFFF;
margin-bottom: 2%;
}
Z-Index only works on positioned elements, try adding this to your .dropdown-menu:
position: relative;
Don't make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.
Related
I've used some html/scss to build a dropdown/select menu (I need to have full control of how the dropdown menu looks like).
The problem is that:
IE 11 opens the dropdown only when I click the down arrow instead the
whole text
in Safari 10.1.1 the dropdown doesn't hide after
clicking the menu "button" entry
Any help would be quite welcome (answering why it behaves like that would be awesome)
.onclick-menu {
position: relative;
display: inline-block;
padding: 0px;
margin: 0px 0px 1em 0px;
outline-width: 0px;
}
.onclick-menu:focus {
pointer-events: none;
}
.onclick-menu::before {
padding: 5px 10px 5px 10px;
background-color: black;
}
.onclick-menu__date-box {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 42px;
padding: 5px 10px 0px 10px;
border: 1px solid #d2d6d9;
position: relative;
min-width: 160px;
background-color: white;
border-radius: 5px;
}
.onclick-menu__date-box::after {
content: "";
transform: none;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+");
background-size: cover;
display: inline-block;
position: relative;
right: -90%;
bottom: 33%;
z-index: 100;
min-width: 15px;
width: 15px;
max-width: 15px;
min-height: 11px;
height: 11px;
max-height: 11px;
}
.onclick-menu__label {
font-size: 14px;
line-height: 14px;
margin-bottom: 3px;
}
.onclick-menu-header {
color: #073590;
font-weight: bold;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
border: 1px solid #e5e7e8;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.12) 8px 8px 6px 0px;
width: -webkit-fill-available;
}
.onclick-menu-content {
pointer-events: auto;
position: absolute;
top: 38px;
left: -1px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition-duration: 0.5s;
transition-property: visibility;
background-color: black;
width: auto;
border: 5px solid 1px black;
margin-top: 19px;
margin-left: 0px;
padding: 5px 15px 5px 5px;
}
.onclick-menu-content::after {
top: -9px;
border: 10px solid white;
}
.onclick-menu-content::before {
top: -10px;
border-bottom-width: 10px solid #e5e7e8;
}
.onclick-menu__date-selector {
border-style: none;
width: 100%;
z-index: 1000;
min-height: 16px;
-webkit-appearance: none;
background-color: white;
color: #073590;
font-size: 16px;
font-weight: bold;
outline-style: none;
}
.onclick-menu-content li {
list-style-type: none;
white-space: nowrap;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline-width: 0px;
cursor: pointer;
padding: 5px 0px 5px 8px;
}
.onclick-menu-content li:hover {
background-color: #e8f4fd;
border-radius: 2px;
border-color: white;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0px;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.onclick-menu-content button {
letter-spacing: 0.03em;
font-weight: bold;
display: block;
width: 100%;
background-color: transparent;
border-style: none;
color: inherit;
cursor: pointer;
outline-width: 0px;
text-align: left;
}
<div tabindex="0" class="onclick-menu__date-box onclick-menu">
<label for="date-select" class="onclick-menu__label">
Take your pick
</label>
<span class="onclick-menu-header">
foo1
</span>
<ul id="date-select" class="onclick-menu-content onclick-menu__date-selector">
<li value="foo1">
<button value="foo1">
foo1
</button>
</li>
<li value="foo2">
<button value="foo2">
foo2
</button>
</li>
<li value="foo3">
<button value="foo3">
foo3
</button>
</li>
</ul>
</div>
HTML:
<div class="menu-panel">
<h3>Table of Contents</h3>
<ul id="menu-toc" class="menu-toc">
<li>Home</li>
<li style="border-top: #FFF solid 1px;" class="menu-toc-current">Biography</li>
<li>Extra Curricular</li>
<li>Favorites</li>
</ul>
</div>
<div class="main">
<h2>Biography</h2>
<p>THIS INFO SHOWS UP WITH HEAVY CSS EDITING</p>
</div>
CSS:
.menu-panel {
background: #013E7D;
width: 240px;
height: 100%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin: 0px;
}
.menu-panel h3 {
font-family:Roboto;
font-size: 1.8em;
padding: 20px;
font-weight: 300;
color: #fff;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}
.menu-toc {
list-style: none;
}
.menu-toc li a {
font-family:Roboto;
display: block;
color: #C0C0C0;
font-size: 1.1em;
line-height: 3.5;
padding: 0 20px;
cursor: pointer;
background: #013E7D;
border-bottom: 1px solid #FFF;
}
.menu-toc li a:hover,
.menu-toc li.menu-toc-current a {
background: #000000;
}
.menu-panel div {
margin-top: 20px;
}
.menu-panel div a {
text-transform: uppercase;
font-size: 0.7em;
line-height: 1;
padding: 5px 20px;
display: block;
border: none;
color: #bc0b0b;
letter-spacing: 1px;
font-weight: 800;
text-shadow: 0 1px rgba(255,255,255,0.2);
}
#media screen and (max-width: 800px) {
.no-js .menu-panel {
display: none;
}
.no-js .container {
padding: 0;
}
#media screen and (max-width: 400px) {
.menu-panel,
.content {
font-size: 75%;
}
.main {
margin-left:797px;
position:fixed;
font-family:Roboto;
}
So basically I need to get the table of contents to be static so all other elements go around it!! I have been trying to fix this and it will not work. If you could help me it would help a lot! Thank you
.menu-panel {
background: #013E7D;
width: 240px;
height: 100%;
z-index: 1000;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0px;
float: left;
}
in css removing the position and adding the float results in horizontally aligned blocks. see also http://codepen.io/anon/pen/XXJRWx
I made a fixed menu bar for my homepage in css using a list. It looks fine, but when I minimize the browser, the menu items move to the left, which I don't want them to do.
How can I prevent that and make the browser keep the position of the menu the way it is, if necessary the browser could add a horizontal scroll bar, but the menu shouldn't move around.
Can anyone help, please?
Here is the HTML coode:
<div id="menu">
<li style="list-style: none;"> <img src="images/head.png"/><br></li>
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
</ul>
</div>
</div>
Here is the CSS code - Menu Navigation Bar:
#cssmenu
{
position: relative;
margin: 0 auto;
clear: both;
}
#cssmenu a
{
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#cssmenu li
{
border: 1px solid transparent;
padding-top: 7px;
display: block;
width: 160px;
float: right;
margin: 0 10px;
}
#cssmenu ul
{
margin: 0 auto;
padding: 0;
text-align: center;
padding-right: 20px;
margin-bottom: -70px;
max-height: 80px;
}
#cssmenu li a
{
padding-top: 8px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid #dfdfdf;
text-decoration: none;
display: block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
font-size: 17px;
font-family: Verdana, Tahoma;
color: #292F33;
}
#cssmenu li:hover a
{
border-bottom: 3px solid #30B0FF;
display: block;
color: #30B0FF;
clear: both;
font-size: 17px;
font-family: Verdana, Tahoma;
transition-duration: 0.1s;
transition-delay: 0.03s;
}
#menu
{
height: 86px;
width: 100%;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
The below code works. I have tested this myself in Chormium CSS editor. All you need to do is add min-width: 1200px or something suitable to your need, then change position: fixed to position: absolute
#menu {
height: 86px;
width: 100%;
min-width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: absolute;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
You need to change the width of the #menu div. Now it is width:100%, so when de body is minimized, the #menu div too. If you set a size of, for example, 1200px, this size will not change when the body is minimized.
I tested it with Chrome CSS editor on your page and it works.
So,
#menu {
height: 86px;
width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
EDITED:
Also set:
body{
min-width:1200px;
}
Replace this style Done :-
#cssmenu li{
width: 12%;
}
Try positioning it to "absolute" rather than "relative".
For making it more good try applying bootstrap.
i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}
So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.
I don't know why it has that weird spacing and was hoping someone could enlighten me.
Here's a JSFiddle
CSS
/* CSS Document */
*{
zoom: 1;
}
.context-menu-container{
border: 1px solid #828790;
padding: 2px;
width: 100px;
background-color: #f1f1f1;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-size: 12px;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
.context-menu{
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
position: relative;
}
.context-menu li{
position: relative;
height: 20px;
border: 1px solid transparent;
border-radius: 2px;
margin: 0px;
}
.context-menu li.separator{
height: 2px;
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
padding: 2px;
margin-left: 26px;
}
.context-menu li.separator:hover{
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}
.context-menu li:hover{
border: 1px solid #afd0f7;
background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}
.context-menu li.disabled, .context-menu li.disabled a{
color: #8b8b8b;
}
.context-menu li.disabled:hover{
border: 1px solid #d5d4d4;
background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}
.context-menu li a{
line-height: 20px;
height: 20px;
text-decoration: none;
color: black;
display: block;
cursor: default;
padding-left: 30px;
position: relative;
}
.context-menu a.delete{
background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}
.context-menu .vertical-separator{
width: 2px;
height: 100%;
position: absolute;
left: 25px;
background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
margin: 0px;
padding: 0px;
margin-bottom: 10px;
}
.context-menu div.label{
margin-left: 25px;
padding-left: 5px;
float:left;
}
HTML
<div class='context-menu-container'>
<ul class='context-menu'>
<div class='vertical-separator'></div>
<li><a class='delete' href="#">Action</a></li>
<li class='separator'></li>
<li class='disabled'>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
You need this, unsurprisingly because of an IE7 bug:
.context-menu li.separator {
font-size: 0;
line-height: 0;
}
http://jsfiddle.net/thirtydot/XLRWT/17/
Also, having a <div> as a child of a <ul> is invalid HTML. It may work in browsers, but it's still invalid.