The container will need a z-index greater than 20 to show up over image (which has a z-index:20;) – You also do not have a background on the container so the text is really hard to read as it overlays the image. Try something like the following and then adjust from there:
@media only screen and (max-width: 767px) {
.hgroup-right {
background: #fff;
z-index: 21;
}
}
Thank you so much for the help Craig, so to clarify, I would copy and paste that in the container section?
Here’s what my container says right now;
container {
margin: 0 auto;
max-width: 978px;
}
}
Hey @ffcoach,
My apologies for the confusing wording I used there. I meant that it appears .hgroup-right is the class on the element that contains your menu (which is why I called it a container). You should be able to copy/paste the exact CSS I posted above.
Yay!!!! You’re the best Craig.
Thank you so much for helping someone that have very little idea of what he is doing 🙂
Not a problem. One thing I noticed in how you implemented it though, is that you didn’t include the media query portion so the background is also impacting your desktop menu and overlapping the page header a bit. The @media portion of the CSS posted above makes sure that this style is only applied on screens smaller than 767px (which is where your mobile menu switches in)
Thanks! I’ll try to figure that out. Is that called “media query”?
