CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
notlkk
notlkk

Reputation: 1231

Responsive Menu with Text on Background Image

I have a responsive menu on top of an image background, which also has text on top.

Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?

The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.

Here's the code

Upvotes: 0

Views: 505

Answers (2)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23409

z-index, bruh.

When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

.topnav{z-index:9999999}

try it.

For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.

Upvotes: 1

Steve K
Steve K

Reputation: 9065

You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:

Here is a fiddle demo Fiddle Demo

Header:

.header-slides {
  height: 500px;
  border: 1px solid black;
  position:relative;
}

<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
  <h2>Header Message</h2>
</div>

Then your nav:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(20,20,20,0.8);
  min-height: 30px;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:5;
}

And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:

ul.topnav.responsive {position: relative;}

Upvotes: 1

Related Questions