Sticky Horizontal Menu help

[mlegg]

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



disregard the other image, I can't delete it

[Beverleyh]

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]

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



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]

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]

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]

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]

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

[Beverleyh]

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.