Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Problems With Positioning Slider Under Nav-bar Css Html

Post a Comment
I am trying to create a nav-bar and slider using CSS and HTML however when I try to position the slider under the nav-bar the slider just disappears. I have been trying to fix this

Solution 1:

A quick fix. Remove position fixed from nav2 class.

.nav2 {
  position: fixed; /* remove this line */width: 100%;
  transition: top 0.2s ease-out;
}

I am not sure if the look of the webpage after the removal of position fixed is what you're looking for, but indeed the removal will position the slider below the navbar. This is what you asked for anyway, hence this is my solution.

Jsfiddle

var slidesWrapper = $('.cd-hero-slider');

//check if a .cd-hero-slider exists in the DOMif (slidesWrapper.length > 0) {

  var sliderNav = $('.cd-slider-nav');
  var slidesNumber = slidesWrapper.children('li').length;
  var visibleSlidePosition = 0;
  var autoPlayId;
  var autoPlayDelay = 5000;

  // autoplay slidersetAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

  // change visible slide
  sliderNav.on('click', 'a', function(event) {
    event.preventDefault();

    var selectedItem = $(this);

    if (!selectedItem.hasClass('selected')) {

      // if it's not already selectedvar selectedPosition = selectedItem.index();
      var activePosition = slidesWrapper.find('li.selected').index();

      if (activePosition < selectedPosition) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      }

      //this is used for the autoplay
      visibleSlidePosition = selectedPosition;

      updateSliderNavigation(sliderNav, selectedPosition);
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    }
  });
}

functionnextSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
}

functionprevSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
}

functionupdateSliderNavigation(pagination, n) {
  var navigationDot = pagination.find('.selected');
  navigationDot.removeClass('selected');
  pagination.find('a').eq(n).addClass('selected');
}

// autoplayfunctionsetAutoplay(wrapper, length, delay) {
  if (wrapper.hasClass('autoplay')) {
    clearInterval(autoPlayId);
    autoPlayId = window.setInterval(function() {
      autoplaySlider(length)
    }, delay);
  }
}

functionautoplaySlider(length) {
  if (visibleSlidePosition < length - 1) {
    nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
    visibleSlidePosition += 1;
  } else {
    prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
    visibleSlidePosition = 0;
  }
  updateSliderNavigation(sliderNav, visibleSlidePosition);
}
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.cd-hero {
  height: 300px;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(0, 0, 0, 0.03);
}

.cd-hero-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-hero-sliderli {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-sliderli.selected {
  /* this is the visible slide */position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-sliderli.move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-sliderli.is-moving,
.cd-hero-sliderli.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}


/* --------------------------------

Single slide style

-------------------------------- */.cd-hero-sliderli {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider.cd-full-width,
.cd-hero-slider.cd-half-width {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.cd-hero-slider.cd-half-width {
  width: 45%;
}

.cd-hero-slider.cd-half-width:first-of-type {
  left: 5%;
}

.cd-hero-slider.cd-half-width:nth-of-type(2) {
  right: 5%;
  left: auto;
}

.cd-hero-slider.cd-content {
  position: relative;
  top: calc(50% - 30px);
  transform: translateY(-52%) !important;
  padding: 050px;
}


/*
    animations & transitions
*/.cd-hero-slider.cd-half-width {
  opacity: 0;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
}

.cd-hero-slider.move-left.cd-half-width {
  -webkit-transform: translateX(-40px);
  -moz-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  -o-transform: translateX(-40px);
  transform: translateX(-40px);
}

.cd-hero-slider.selected.cd-half-width {
  /* this is the visible slide */opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider.is-moving.cd-half-width {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
  -webkit-transition: opacity 0s0.5s, -webkit-transform 0s0.5s;
  -moz-transition: opacity 0s0.5s, -moz-transform 0s0.5s;
  transition: opacity 0s0.5s, transform 0s0.5s;
}

.cd-hero-sliderli.selected.from-left.cd-half-width:nth-of-type(2),
.cd-hero-sliderli.selected.from-right.cd-half-width:first-of-type {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s0.2s, -webkit-transform 0.5s0.2s;
  -moz-transition: opacity 0.4s0.2s, -moz-transform 0.5s0.2s;
  transition: opacity 0.4s0.2s, transform 0.5s0.2s;
}

.cd-hero-sliderli.selected.from-left.cd-half-width:first-of-type,
.cd-hero-sliderli.selected.from-right.cd-half-width:nth-of-type(2) {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s0.4s, -webkit-transform 0.5s0.4s;
  -moz-transition: opacity 0.4s0.4s, -moz-transform 0.5s0.4s;
  transition: opacity 0.4s0.4s, transform 0.5s0.4s;
}

.cd-hero-slider.cd-full-widthh1,
.cd-hero-slider.cd-full-widthh2,
.cd-hero-slider.cd-full-widthh3,
.cd-hero-slider.cd-full-widthh4,
.cd-hero-slider.cd-full-widthh5,
.cd-hero-slider.cd-full-widthh6,
.cd-hero-slider.cd-full-widthp,
.cd-hero-slider.cd-full-widtha,
.cd-hero-slider.cd-full-width.button {
  opacity: 0;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

.cd-hero-slider.move-left.cd-full-widthh1,
.cd-hero-slider.move-left.cd-full-widthh2,
.cd-hero-slider.move-left.cd-full-widthh3,
.cd-hero-slider.move-left.cd-full-widthh4,
.cd-hero-slider.move-left.cd-full-widthh5,
.cd-hero-slider.move-left.cd-full-widthh6,
.cd-hero-slider.move-left.cd-full-widthp,
.cd-hero-slider.move-left.cd-full-width.button {
  opacity: 0;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  -o-transform: translateX(-100px);
  transform: translateX(-100px);
}

.cd-hero-slider.selected.cd-full-widthh1,
.cd-hero-slider.selected.cd-full-widthh2,
.cd-hero-slider.selected.cd-full-widthh3,
.cd-hero-slider.selected.cd-full-widthh4,
.cd-hero-slider.selected.cd-full-widthh5,
.cd-hero-slider.selected.cd-full-widthh6,
.cd-hero-slider.selected.cd-full-widthp,
.cd-hero-slider.selected.cd-full-width.button {
  /* this is the visible slide */opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-sliderli.is-moving.cd-full-widthh1,
.cd-hero-sliderli.is-moving.cd-full-widthh2,
.cd-hero-sliderli.is-moving.cd-full-widthh3,
.cd-hero-sliderli.is-moving.cd-full-widthh4,
.cd-hero-sliderli.is-moving.cd-full-widthh5,
.cd-hero-sliderli.is-moving.cd-full-widthh6,
.cd-hero-sliderli.is-moving.cd-full-widthp,
.cd-hero-sliderli.is-moving.cd-full-width.button {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
  -webkit-transition: opacity 0s0.5s, -webkit-transform 0s0.5s;
  -moz-transition: opacity 0s0.5s, -moz-transform 0s0.5s;
  transition: opacity 0s0.5s, transform 0s0.5s;
}


/* different timings for different elements */.cd-hero-sliderli.selectedh1,
.cd-hero-sliderli.selectedh2,
.cd-hero-sliderli.selectedh3,
.cd-hero-sliderli.selectedh4,
.cd-hero-sliderli.selectedh5,
.cd-hero-sliderli.selectedh6 {
  -webkit-transition: opacity 0.4s0.2s, -webkit-transform 0.5s0.2s;
  -moz-transition: opacity 0.4s0.2s, -moz-transform 0.5s0.2s;
  transition: opacity 0.4s0.2s, transform 0.5s0.2s;
}

.cd-hero-sliderli.selectedp {
  -webkit-transition: opacity 0.4s0.3s, -webkit-transform 0.5s0.3s;
  -moz-transition: opacity 0.4s0.3s, -moz-transform 0.5s0.3s;
  transition: opacity 0.4s0.3s, transform 0.5s0.3s;
}

.cd-hero-sliderli.selected.button,
.cd-hero-sliderli.selectedinput[type="button"],
.cd-hero-sliderli.selectedbutton {
  -webkit-transition: opacity 0.4s0.4s, -webkit-transform 0.5s0.4s, background-color 0.2s0s;
  -moz-transition: opacity 0.4s0.4s, -moz-transform 0.5s0.4s, background-color 0.2s0s;
  transition: opacity 0.4s0.4s, transform 0.5s0.4s, background-color 0.2s0s;
}


/*
    slider navigation
*/.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: 30px;
}

.cd-slider-navnav {
  display: inline-block;
  position: relative;
  height: 100%;
}

.cd-slider-nava {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.cd-slider-nava.selected {
  background-color: rgba(0, 0, 0, 0.5);
}


/* --------------------------------

Javascript disabled

-------------------------------- */.no-js.cd-hero-sliderli {
  display: none;
}

.no-js.cd-hero-sliderli.selected {
  display: block;
}

.no-js.cd-slider-nav {
  display: none;
}

@import'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
  margin: 0px0px0px0px;
}

.nav2 {
  width: 100%;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  width: 100%;
  box-shadow: inset 0px -1px0px0pxrgba(0, 0, 0, 0.13);
}

.nav2ul#menu {
  padding-left: 0;
  display: flex;
}

.nav2.ul2.li2 {
  flex-grow: 1;
}

.nav-bar {
  /* Rectangle 1: */background: #FFFFFF;
  box-shadow: 0px2px2px0pxrgba(0, 0, 0, 0.11), 0px4px6px0pxrgba(0, 0, 0, 0.11);
  width: 100%;
  text-align: center;
}

//-------------------------------------------------------

/*Strip the ul of padding and list styling*/.ul2 {
  list-style-type: none;
  margin: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/.li2 {
  display: inline-block;
  float: center;
}


/*Style for menu links*/.li2.a2 {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/.li2:hover.a2 {
  background: #19c589;
}


/*Style for dropdown links*/.li2:hover.ul2.a2 {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/.li2:hover.ul2.a2:hover {
  background: #19c589;
  color: #fff;
}


/*Hide dropdown links until they are needed*/.li2.ul2 {
  display: none;
}


/*Make dropdown links vertical*/.li2.ul2.li2 {
  display: block;
  float: none;
}


/*Prevent text wrapping*/.li2.ul2.li2.a2 {
  width: auto;
  min-width: 100px;
}


/*Display the dropdown on hover*/.ul2.li2.a2:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}


/*Hide checkbox*/input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/input[type=checkbox]:checked~#menu {
  display: block;
}


/*Responsive Styles*/@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/.nav2.ul2#menu {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/.li2 {
    margin-bottom: 0px;
  }
  /*Make all menu links full width*/.ul2.li2,
  .li2.a2 {
    width: 100%;
  }
  /*Display 'show menu' link*/.show-menu {
    display: block;
  }
}

.hero-image {
  /* The image used *//* Set a specific height */height: 50%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  vertical-align: top;
}

#menu {
  margin: 0;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>slick slider</title><linkhref="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><linkhref="css/style.css"></head><body><navclass="nav2"><divclass="banner animated"><imgclass="hero-image"src="https://picsum.photos/1080/200/?random"></div><divclass="nav-bar"><labelfor="show-menu"class="show-menu">Show Menu</label><inputtype="checkbox"id="show-menu"role="button"><ulid="menu"class="ul2"><liclass="li2"><ahref="#"class="a2">Home</a></li><liclass="li2"><ahref="#"class="a2">About</a></li><liclass="li2"><ahref="#"class="a2">Portfolio</a></li><liclass="li2"><ahref="#"class="a2">News</a></li><liclass="li2"><ahref="#"class="a2">Contact</a></li></ul></div></nav><sectionclass="cd-hero"><ulclass="cd-hero-slider autoplay"><liclass="selected"style="background-color:#3498db"><divclass="cd-full-width"><divclass="cd-content"><h2>slide content</h2></div></div></li><listyle="background-color:#34495e"><divclass="cd-half-width"><divclass="cd-content"><h2>slide content</h2></div></div><divclass="cd-half-width cd-img-container"><divclass="cd-content"><h2>slide content</h2></div></div></li><listyle="background-color:#e67e22"><divclass="cd-half-width cd-img-container"><divclass="cd-content"><h2>slide content</h2></div></div><divclass="cd-half-width"><divclass="cd-content"><h2>slide content</h2></div></div></li><listyle="background-color:#2ecc71"><divclass="cd-full-width"><divclass="cd-content"><h2>slide content</h2></div></div></li><listyle="background-color:#9b59b6"><divclass="cd-full-width"><divclass="cd-content"><h2>slide content</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi corporis, dignissimos dolorem doloremque eveniet explicabo minima, nihil pariatur, porro possimus rem voluptatem? A dignissimos inventore necessitatibus vel veritatis.</p></div></div></li></ul><divclass="cd-slider-nav"><!--<span class="cd-marker"></span>--><nav><ahref="#0"class="selected"></a><ahref="#0"></a><ahref="#0"></a><ahref="#0"></a><ahref="#0"></a></nav></div><!-- .cd-slider-nav --></section><scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script><scriptsrc="js/index.js"></script></body></html>

Post a Comment for "Problems With Positioning Slider Under Nav-bar Css Html"