Member Avatar for ashley9210_1

I have a flex slider and I want to place a div over the top so I can put a nav bar on there. It's not co-operating with me. Any help will be apreccatied.

Thanks in advance.

HTML

<body><div class="container">

<div id="logo-nav" class="sixteen colums">
    <img src="img/logo-white.png" class="logo">
</div>

<div class="flexslider" id="flexslider">
  <ul class="slides">
    <li><img src="img/slider.jpg" /></li>
    <li><img src="img/slider.jpg" /></li>
    <li><img src="img/slider.jpg" /></li>
  </ul>
</div>

</div></body>

CSS

.logo{
      float:          left;
      position:       relative;
      padding-left:     50px;
  }

  #logo-nav{
  float:        left;
  height:       50px;
  padding:      50px;
  position:     relative;

}

#flexslider ul li{
    float: left
}
  • 2 Contributors
  • 4 Replies
  • 384 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Good call, — a z-index will often fix the symptom, but the most reliable pattern is to create a positioning context for the slider and place the nav as an absolutely positioned overlay inside that context. That avoids float/layout interaction and reduces surprises from the slider script. 's attempt to show a link was helpful even if it got snipped.

Keep the slider wrapper relatively positioned and the nav absolutely positioned (full width, top:0) with a high z-index. Use flexbox inside the nav for layout instead of floats so links and the logo stay aligned and clickable. Also make sure slider images are display: block; width: 100%; height: auto; so they don't introduce unexpected gaps.

Example (apply to your page by wrapping the slider and adding a nav element):

/* wrapper that the overlay will be positioned against */
.slider-wrap { position: relative; overflow: hidden; }

/* overlay nav that sits on top of the slides */
.overlay-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0,0,0,0.2); /* optional translucent background */
}

/* ensure slides behave predictably */
.slider-wrap .slides img { display: block; width: 100%; height: auto; }

Troubleshooting tips: if the nav still appears behind the slides, inspect for transform (eg. translate3d) on slider elements — transforms create stacking contexts and can block z-index from working as expected. Fixes: move the overlay inside the same wrapper as the transformed element, or (with caution) override the transform on the offending element. If you want the nav to be sticky, use position: fixed and add equivalent top padding to the content below. Add role="navigation"/aria-label to the nav for accessibility.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

You tried here?

Member Avatar for ashley9210_1

Well I thought here would of helped.

Member Avatar for ashley9210_1

bit of z-index helped haha

Member Avatar for Member #120589

he he, my link got snipped - by myself probably! Glad you fixed it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.