PDA

View Full Version : Resolved Sticky Horizontal Menu help



mlegg
05-19-2016, 12:48 AM
1) Script Title: Sticky Horizontal Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/sticky-horizontal-menu.htm

3) Describe problem:
I made a test page here (http://isellrye.com/test.html). 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 (http://isellrye.com/styles.css)

5905

disregard the other image, I can't delete it

Beverleyh
05-19-2016, 05:08 AM
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.

mlegg
05-19-2016, 11:51 AM
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

5906

css for sticky menu

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;
}
}




css for the css stickymenumobile part

/*
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;
}

}

Beverleyh
05-19-2016, 12:27 PM
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

mlegg
05-19-2016, 02:50 PM
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

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;
}
}



stickymenumobile2

/*
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;
}

}

jscheuer1
05-19-2016, 03:28 PM
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):


#stickymenudiv {z-index: 1;}

or (as that I believe is the default, so I'm assuming something changed it somewhere somehow, though I couldn't find that):


#stickymenudiv {z-index: 1 !important;}

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.

mlegg
05-19-2016, 03:48 PM
John it's just a simple html page, no bootstrap or anything

edit: I don't see anything in the main styles.css (http://isellrye.com/styles.css) sheet that should be interfering

Beverleyh
05-19-2016, 04:19 PM
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.