Printable View
1) Script Title: Sticky Horizontal Menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ontal-menu.htm
3) Describe problem:
I made a test page here. I like the way it works on your script URL page.
When the page is narrow width, I don't see the hamburger icon show up. It just keeps all the menus on top of each other,
css stylesheet link
Attachment 5905
disregard the other image, I can't delete it
I'm not sure what your question is - can you please clarify? (What you've posted is just a bunch of statements)
Looking at things on iPhone 5S, in both portrait and landscape, I see a hamburger icon on both your test page and the DD demo page.
wow, I left out a part of my question, sorry. The menu is translucent when it's small, so you can read the page behind it. I don't want that. I would like it to be a solid color
Attachment 5906
css for sticky menu
css for the css stickymenumobile partCode:button#stickymobiletoggler{ /* mobile menu toggler */
display: none;
}
#stickymenuwrapper{
position: relative;
height: auto;
}
div#stickymenudiv{
width: 100%;
position: relative;
min-height: 50px; /* The minimum height of the sticky menu container */
background: #5EA5B9;
display: table;
margin: 0;
padding: 5px; /* The padding of the sticky menu container */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div#stickymenudiv:after{ /* pseudo element to create transparent background */
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: white;
opacity: 0;
}
div#stickymenudiv ul{
list-style: none;
position: relative;
margin: 0;
padding: 0;
width: 100%;
z-index: 5;
display: table-cell;
text-align: center;
vertical-align: middle; /* vertically center UL inside container */
font: bold 1.1em Arial;
text-transform: uppercase;
-webkit-transition: all .5s; /* transition time */
transition: all .5s; /* transition time */
}
div#stickymenudiv ul li{
display: inline;
text-align: center;
margin: auto;
}
div#stickymenudiv ul li a{
text-decoration: none;
text-align: center;
display: inline-block;
padding: 5px 10px;
border-right: 1px solid #eee;
color: black;
}
div#stickymenudiv ul li:last-of-type a{
border-right-width: 0;
}
div#stickymenudiv ul li a img{
vertical-align: middle;
border-width: 0;
}
div#stickymenudiv ul li a:hover{
background: #F9EBBB;
}
body.sticky div#stickymenudiv{ /* #stickymenudiv style when menu is sticky (BODY has sticky class) */
position: fixed;
top: 0;
left: 0;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
-webkit-animation: glidein 0.5s forwards; /* animate sticky menu into view */
animation: glidein 0.5s forwards; /* animate sticky menu into view */
}
body.sticky div#stickymenudiv:after{
opacity: .9; /* opacity of background DIV when menu is sticky */
}
@-webkit-keyframes glidein{
from{-webkit-transform: translate3d(0,-100%,0)}
to{-webkit-transform: translate3d(0,0,0)}
}
@keyframes glidein{
from{transform: translate3d(0,-100%,0)}
to{transform: translate3d(0,0,0)}
}
/* ##### responsive style ##### */
@media (max-width: 700px){
div#stickymenudiv ul{
font-size: .9em;
}
div#stickymenudiv ul li a img{
width: 36px;
height: auto;
}
}
Code:/*
Full screen menu style in mobile devices
700px or less device width by default
*/
@media (max-device-width: 700px){
button#stickymobiletoggler{ /* Main toggler button to toggle mobile menu state */
z-index: 100;
display: block; /* show mobile menu toggler */
position: relative;
font-size: 11px; /* change font size to change label dimensions. Leave width/height below alone */
width: 3em;
height: 2.4em;
top: 0;
left: 0;
margin: 10px 0;
background: white;
border: 0.4em solid black; /* border color */
border-width: 0.4em 0;
z-index: 10000;
cursor: pointer;
transition: all 0.3s ease-in;
}
button#stickymobiletoggler::before,
button#stickymobiletoggler::after {
/* inner stripes inside toggler */
content: "";
display: block;
position: absolute;
width: 100%;
height: 0.4em;
top: 50%;
margin-top: -0.2em;
left: 0;
background: black; /* stripes background color. Change to match border color of parent label above */
-webkit-transform: rotate(0);
transform: rotate(0);
transition: all 0.3s ease-in;
}
button#stickymobiletoggler.open{
/* state of mobile menu toggler when menu is open */
border-color: transparent;
}
button#stickymobiletoggler.open::before{
/* state of mobile menu toggler when menu is open */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
button#stickymobiletoggler.open::after {
/* state of mobile menu toggler when menu is open */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div#stickymenudiv{
display: none;
box-shadow: none !important;
}
div#stickymenudiv.open{ /* #stickymenudiv style when mobile menu is open */
position: fixed;
display: table;
top: 0;
left: 0;
height: 100%;
overflow: auto;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
animation: glidein 0.5s forwards; /* animate sticky menu into view */
}
div#stickymenudiv.open:after{
opacity: .9; /* opacity of background DIV when menu is sticky */
}
div#stickymenudiv.open ul{
font-size: 1.6em;
}
div#stickymenudiv.open ul li{
display: block;
text-align: center;
margin: auto;
}
div#stickymenudiv.open ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 20px 10px;
border-right-width: 0;
border-bottom: 1px solid #eee;
color: black;
}
}
TIP: Transparency in CSS is usually the result of 'opacity' and/or 'rgba' and/or 'hsla'. Try searching for those values in your CSS and set them to 1.
More help on CSS colours and syntax here: http://www.w3schools.com/css/css3_colors.asp
I changed them to 1 and re-uploaded it to the server, then refreshed my css cached. It still looks the same, I can read text though the menu.
stickymenu2
stickymenumobile2Code:button#stickymobiletoggler{ /* mobile menu toggler */
display: none;
}
#stickymenuwrapper{
position: relative;
height: auto;
}
div#stickymenudiv{
width: 100%;
position: relative;
min-height: 50px; /* The minimum height of the sticky menu container */
background: #5EA5B9;
display: table;
margin: 0;
padding: 5px; /* The padding of the sticky menu container */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div#stickymenudiv:after{ /* pseudo element to create transparent background */
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: white;
opacity: 1;
}
div#stickymenudiv ul{
list-style: none;
position: relative;
margin: 0;
padding: 0;
width: 100%;
z-index: 5;
display: table-cell;
text-align: center;
vertical-align: middle; /* vertically center UL inside container */
font: bold 1.1em Arial;
text-transform: uppercase;
-webkit-transition: all .5s; /* transition time */
transition: all .5s; /* transition time */
}
div#stickymenudiv ul li{
display: inline;
text-align: center;
margin: auto;
}
div#stickymenudiv ul li a{
text-decoration: none;
text-align: center;
display: inline-block;
padding: 5px 10px;
border-right: 1px solid #eee;
color: black;
}
div#stickymenudiv ul li:last-of-type a{
border-right-width: 0;
}
div#stickymenudiv ul li a img{
vertical-align: middle;
border-width: 0;
}
div#stickymenudiv ul li a:hover{
background: #F9EBBB;
}
body.sticky div#stickymenudiv{ /* #stickymenudiv style when menu is sticky (BODY has sticky class) */
position: fixed;
top: 0;
left: 0;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
-webkit-animation: glidein 0.5s forwards; /* animate sticky menu into view */
animation: glidein 0.5s forwards; /* animate sticky menu into view */
}
body.sticky div#stickymenudiv:after{
opacity: 1; /* opacity of background DIV when menu is sticky */
}
@-webkit-keyframes glidein{
from{-webkit-transform: translate3d(0,-100%,0)}
to{-webkit-transform: translate3d(0,0,0)}
}
@keyframes glidein{
from{transform: translate3d(0,-100%,0)}
to{transform: translate3d(0,0,0)}
}
/* ##### responsive style ##### */
@media (max-width: 700px){
div#stickymenudiv ul{
font-size: .9em;
}
div#stickymenudiv ul li a img{
width: 36px;
height: auto;
}
}
Code:/*
Full screen menu style in mobile devices
700px or less device width by default
*/
@media (max-device-width: 700px){
button#stickymobiletoggler{ /* Main toggler button to toggle mobile menu state */
z-index: 100;
display: block; /* show mobile menu toggler */
position: relative;
font-size: 11px; /* change font size to change label dimensions. Leave width/height below alone */
width: 3em;
height: 2.4em;
top: 0;
left: 0;
margin: 10px 0;
background: white;
border: 0.4em solid black; /* border color */
border-width: 0.4em 0;
z-index: 10000;
cursor: pointer;
transition: all 0.3s ease-in;
}
button#stickymobiletoggler::before,
button#stickymobiletoggler::after {
/* inner stripes inside toggler */
content: "";
display: block;
position: absolute;
width: 100%;
height: 0.4em;
top: 50%;
margin-top: -0.2em;
left: 0;
background: black; /* stripes background color. Change to match border color of parent label above */
-webkit-transform: rotate(0);
transform: rotate(0);
transition: all 0.3s ease-in;
}
button#stickymobiletoggler.open{
/* state of mobile menu toggler when menu is open */
border-color: transparent;
}
button#stickymobiletoggler.open::before{
/* state of mobile menu toggler when menu is open */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
button#stickymobiletoggler.open::after {
/* state of mobile menu toggler when menu is open */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div#stickymenudiv{
display: none;
box-shadow: none !important;
}
div#stickymenudiv.open{ /* #stickymenudiv style when mobile menu is open */
position: fixed;
display: table;
top: 0;
left: 0;
height: 100%;
overflow: auto;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
animation: glidein 0.5s forwards; /* animate sticky menu into view */
}
div#stickymenudiv.open:after{
opacity: 1; /* opacity of background DIV when menu is sticky */
}
div#stickymenudiv.open ul{
font-size: 1.6em;
}
div#stickymenudiv.open ul li{
display: block;
text-align: center;
margin: auto;
}
div#stickymenudiv.open ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 20px 10px;
border-right-width: 0;
border-bottom: 1px solid #eee;
color: black;
}
}
Note, I only tested this in a laptop, but it also seems to work in the iphone 6 simulator.
In this case, or at least at this point in this case, it appears to be the z-index. I found just giving the #stickymenudiv div a z-index of 1 was enough (in a stylesheet):
or (as that I believe is the default, so I'm assuming something changed it somewhere somehow, though I couldn't find that):Code:#stickymenudiv {z-index: 1;}
I'm thinking you may have some conflicting styles, perhaps a bootstrap css or certain defaults you like using. But, as I say I couldn't easily find that.Code:#stickymenudiv {z-index: 1 !important;}
John it's just a simple html page, no bootstrap or anything
edit: I don't see anything in the main styles.css sheet that should be interfering
So since you changed the opacity to 1, the mobile menu background now completely covers the background (the waves) so the difference has helped to highlight the fact that z-index is the real problem. So try putting a high z-index value alongside the other div#stickymenudiv.open definitions to see what effect that has. During troubleshooting, it might also help to remove any z-index values set on any other elements until you narrow things down.