Bootstrap collapsible not pushing down parallax

Question

I got a website that was working earlier, and suddenly my bottom collapsible doesn't push the parallax down, it does push my <hr> down and also the footer, but not the parallax window, I'd be happy if someone could help me with this.

/*@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}*/

body {
 text-align: center;
 background-color: #222;
}

hr {
 border-color: #191919;
}

.inf {
  color: white;
}

#logo-pc {
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-tablet {
 padding-top: 130px;
 width: 800px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-smaller {
 padding-top: 130px;
 width: 600px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-phone {
 padding-top: 190px;
 width: 200px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

.panel {
    background-image: none;
    background-color: #393939;
    color: white;
}

button {
 width: 200px;
}

.included1 {
  font-size: 18pt;
  margin-top: 15px;
  margin-bottom: 0;
}

.included {
  font-size: 15pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
  margin: 0px;
}

.included2 {
  font-size: 15pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
  margin: 5px;
}

.logo-animation {
  animation-duration: 3s;
  animation-delay: 0.5s;
}

.maten {
  font-size: 12pt;
}

.ingredienser {
  font-size: 10pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
}

.overlay {
   background:transparent; 
   position:relative; 
   width:350px;
   height:440px; /* your iframe height */
   top:440px;  /* your iframe height */
   margin-top:-440px;  /* your iframe height */
}



/* Footer CSS */
footer {
    background: #333;
    color: #eee;
    font-size: 12px;
    padding: 20px;
}

@keyframes heartbeat{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

.heart{
  animation: heartbeat 1s infinite;
}
/* END Footer CSS; */

<!DOCTYPE html>
<html>
<head>

<!-- Bootstrap CDN v3.3.7 -->

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="js/parallax.min.js"></script>

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <!-- Optional theme -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 <!-- //.Bootstrap -->
</head>
<body>

<div class="col-xs-12 col-sm-6 fadeIn wow">
    <div class="accordion" id="myAccordion4">
        <div class="panel">
            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
            <div id="collapsible-13" class="collapse">
             <h1 class="included">(Korv Meny)</h1>
             <hr>
             <p class="maten">Smal<br></p>
          <h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
          <hr>
             <p class="maten">Tjock<br></p>
          <h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
          <hr>
             <p class="maten">Pommes<br></p>
          <h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
          <hr>
             <p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
          <h5 class="ingredienser">med potatismos & lingon</h5>
          <hr>
             <p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
          <h5 class="ingredienser">med potatismos & lingon</h5>
          <hr>
             <p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
          <h5 class="ingredienser">med potatismos & lingon</h5>
            </div>
        </div>
        <div class="panel">
            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
            <div id="collapsible-14" class="collapse">
             <h1 class="included1">I alla salladsmenyer ingår</h1>
             <h1 class="included">(sallad, tomat, gurka, bröd och dressing)
             <hr>
             </h1>
             <p class="maten">Gyros<br></p>
          <h5 class="ingredienser">gyros, lök, sås</h5>
          <hr>
             <p class="maten">Kycklingsallad<br></p>
          <h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
          <hr>
             <p class="maten">Kebabsallad<br></p>
          <h5 class="ingredienser">kebabkött, lök, sås</h5>
          <hr>
             <p class="maten">Grekisk sallad<br></p>
          <h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
          <hr>
             <p class="maten">Tonfisksallad<br></p>
          <h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
          <hr>
             <p class="maten">Amerikansk sallad<br></p>
          <h5 class="ingredienser">ost, skinka, ananas, sås</h5>
          <hr>
             <p class="maten">Räksallad 80:-<br></p>
          <h5 class="ingredienser">räkor, ost, paprika, citron</h5>
          <hr>
            </div>
        </div>
        <div class="panel">
            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
            <div id="collapsible-15" class="collapse">
             <p class="maten">Kyckling Pasta<br></p>
          <h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
          <hr>
             <p class="maten">Tonfisk Pasta<br></p>
          <h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
          <hr>
             <p class="maten">Gyros Pasta<br></p>
          <h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
          <hr>
             <p class="maten">Pasta Bolognese<br></p>
          <h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
       </div>
        </div>
    </div>
   </div><!-- //.col-xs-12 col-sm-6 -->
  </div><!-- //.row -->
 </div><!-- //.container -->

  <hr>
  <div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>

 <footer>
  <div class="container">
   <div class="row">
    <div class="col-sm-2">
     <h6>©2018 Bence Papp. All rights reserved.</h6>
    </div><!-- //.col-sm-2 -->
    <div class="col-sm-3">
     <h5>Kontakta oss</h5>
     <p>Tel. nr<a href="tel:">tel.</a></p>
     <!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
     <a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
    </div><!-- //.col-sm-3 -->
    <div class="col-sm-2">
     <h5>Hoppa till</h5>
     <ul class="unstyled">
      <li><a href="#top">Start</a></li>
     </ul>
    </div><!-- //.col-sm-2 -->
    <div class="col-sm-2">
<!--      <h5>Sociala medier</h5>
     <ul>
      <li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
     </ul> -->
    </div><!-- //.col-sm-2 -->
    <div class="col-md-3">
                     <h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
             </div><!-- //.col-sm-3 -->
   </div><!-- //.row -->
  </div><!-- //.container -->
 </footer>
  
  </body>
</html>

It does push the footer down, and the <hr> like I said, but not the parallax window...

[EDIT(adding js code)]

/*!
 * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2016 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 */

;(function ( $, window, document, undefined ) {

  // Polyfill for requestAnimationFrame
  // via: https://gist.github.com/paulirish/1579671

  (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
  }());


  // Parallax Constructor

  function Parallax(element, options) {
    var self = this;

    if (typeof options == 'object') {
      delete options.refresh;
      delete options.render;
      $.extend(this, options);
    }

    this.$element = $(element);

    if (!this.imageSrc && this.$element.is('img')) {
      this.imageSrc = this.$element.attr('src');
    }

    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];

    if (positions.length < 1) {
      positions.push('center');
    }
    if (positions.length == 1) {
      positions.push(positions[0]);
    }

    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
      positions = [positions[1], positions[0]];
    }

    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();

    self.positionX = positions[0];
    self.positionY = positions[1];

    if (this.positionX != 'left' && this.positionX != 'right') {
      if (isNaN(parseInt(this.positionX))) {
        this.positionX = 'center';
      } else {
        this.positionX = parseInt(this.positionX);
      }
    }

    if (this.positionY != 'top' && this.positionY != 'bottom') {
      if (isNaN(parseInt(this.positionY))) {
        this.positionY = 'center';
      } else {
        this.positionY = parseInt(this.positionY);
      }
    }

    this.position =
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
      this.positionY + (isNaN(this.positionY)? '' : 'px');

    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    if (navigator.userAgent.match(/(Android)/)) {
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    this.$mirror = $('<div />').prependTo(this.mirrorContainer);

    var slider = this.$element.find('>.parallax-slider');
    var sliderExisted = false;

    if (slider.length == 0)
      this.$slider = $('<img />').prependTo(this.$mirror);
    else {
      this.$slider = slider.prependTo(this.$mirror)
      sliderExisted = true;
    }

    this.$mirror.addClass('parallax-mirror').css({
      visibility: 'hidden',
      zIndex: this.zIndex,
      position: 'fixed',
      top: 0,
      left: 0,
      overflow: 'hidden'
    });

    this.$slider.addClass('parallax-slider').one('load', function() {
      if (!self.naturalHeight || !self.naturalWidth) {
        self.naturalHeight = this.naturalHeight || this.height || 1;
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
      }
      self.aspectRatio = self.naturalWidth / self.naturalHeight;

      Parallax.isSetup || Parallax.setup();
      Parallax.sliders.push(self);
      Parallax.isFresh = false;
      Parallax.requestRender();
    });

    if (!sliderExisted)
      this.$slider[0].src = this.imageSrc;

    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
      this.$slider.trigger('load');
    }

  }


  // Parallax Instance Methods

  $.extend(Parallax.prototype, {
    speed:    0.2,
    bleed:    0,
    zIndex:   -100,
    iosFix:   true,
    androidFix: true,
    position: 'center',
    overScrollFix: false,
    mirrorContainer: 'body',

    refresh: function() {
      this.boxWidth        = this.$element.outerWidth();
      this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
      this.boxOffsetLeft   = this.$element.offset().left;
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;

      var winHeight = Parallax.winHeight;
      var docHeight = Parallax.docHeight;
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
      var margin;

      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
        this.imageHeight   = imageHeightMin;
        this.offsetBaseTop = imageOffsetMin;

        margin = this.imageWidth - this.boxWidth;

        if (this.positionX == 'left') {
          this.offsetLeft = 0;
        } else if (this.positionX == 'right') {
          this.offsetLeft = - margin;
        } else if (!isNaN(this.positionX)) {
          this.offsetLeft = Math.max(this.positionX, - margin);
        } else {
          this.offsetLeft = - margin / 2 | 0;
        }
      } else {
        this.imageWidth    = this.boxWidth;
        this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
        this.offsetLeft    = 0;

        margin = this.imageHeight - imageHeightMin;

        if (this.positionY == 'top') {
          this.offsetBaseTop = imageOffsetMin;
        } else if (this.positionY == 'bottom') {
          this.offsetBaseTop = imageOffsetMin - margin;
        } else if (!isNaN(this.positionY)) {
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
        } else {
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
        }
      }
    },

    render: function() {
      var scrollTop    = Parallax.scrollTop;
      var scrollLeft   = Parallax.scrollLeft;
      var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
      var scrollBottom = scrollTop + Parallax.winHeight;

      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
        this.visibility = 'visible';
        this.mirrorTop = this.boxOffsetTop  - scrollTop;
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
      } else {
        this.visibility = 'hidden';
      }

      this.$mirror.css({
        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
        visibility: this.visibility,
        height: this.boxHeight,
        width: this.boxWidth
      });

      this.$slider.css({
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
        position: 'absolute',
        height: this.imageHeight,
        width: this.imageWidth,
        maxWidth: 'none'
      });
    }
  });


  // Parallax Static Methods

  $.extend(Parallax, {
    scrollTop:    0,
    scrollLeft:   0,
    winHeight:    0,
    winWidth:     0,
    docHeight:    1 << 30,
    docWidth:     1 << 30,
    sliders:      [],
    isReady:      false,
    isFresh:      false,
    isBusy:       false,

    setup: function() {
      if (this.isReady) return;

      var self = this;

      var $doc = $(document), $win = $(window);

      var loadDimensions = function() {
        Parallax.winHeight = $win.height();
        Parallax.winWidth  = $win.width();
        Parallax.docHeight = $doc.height();
        Parallax.docWidth  = $doc.width();
      };

      var loadScrollPosition = function() {
        var winScrollTop  = $win.scrollTop();
        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
      };

      $win.on('resize.px.parallax load.px.parallax', function() {
          loadDimensions();
          self.refresh();
          Parallax.isFresh = false;
          Parallax.requestRender();
        })
        .on('scroll.px.parallax load.px.parallax', function() {
          loadScrollPosition();
          Parallax.requestRender();
        });

      loadDimensions();
      loadScrollPosition();

      this.isReady = true;

      var lastPosition = -1;

      function frameLoop() {
        if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
          window.requestAnimationFrame(frameLoop);
          return false;
        } else lastPosition = window.pageYOffset;

        self.render();
        window.requestAnimationFrame(frameLoop);
      }

      frameLoop();
    },

    configure: function(options) {
      if (typeof options == 'object') {
        delete options.refresh;
        delete options.render;
        $.extend(this.prototype, options);
      }
    },

    refresh: function() {
      $.each(this.sliders, function(){ this.refresh(); });
      this.isFresh = true;
    },

    render: function() {
      this.isFresh || this.refresh();
      $.each(this.sliders, function(){ this.render(); });
    },

    requestRender: function() {
      var self = this;
      self.render();
      self.isBusy = false;
    },
    destroy: function(el){
      var i,
          parallaxElement = $(el).data('px.parallax');
      parallaxElement.$mirror.remove();
      for(i=0; i < this.sliders.length; i+=1){
        if(this.sliders[i] == parallaxElement){
          this.sliders.splice(i, 1);
        }
      }
      $(el).data('px.parallax', false);
      if(this.sliders.length === 0){
        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
        this.isReady = false;
        Parallax.isSetup = false;
      }
    }
  });


  // Parallax Plugin Definition

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this);
      var options = typeof option == 'object' && option;

      if (this == window || this == document || $this.is('body')) {
        Parallax.configure(options);
      }
      else if (!$this.data('px.parallax')) {
        options = $.extend({}, $this.data(), options);
        $this.data('px.parallax', new Parallax(this, options));
      }
      else if (typeof option == 'object')
      {
        $.extend($this.data('px.parallax'), options);
      }
      if (typeof option == 'string') {
        if(option == 'destroy'){
            Parallax.destroy(this);
        }else{
          Parallax[option]();
        }
      }
    });
  }

  var old = $.fn.parallax;

  $.fn.parallax             = Plugin;
  $.fn.parallax.Constructor = Parallax;


  // Parallax No Conflict

  $.fn.parallax.noConflict = function () {
    $.fn.parallax = old;
    return this;
  };


  // Parallax Data-API

  $( function () { 
    $('[data-parallax="scroll"]').parallax(); 
  });

}(jQuery, window, document));

[EDIT] I'm using this parallax.js

Thanks in advance!

score 0 · Answer 1 · answered Nov 11 '18 at 16:36

0

First of all, you should validate your HTML, </head> and <body> tags are missing and there are two </div> moreover. (line 96 or something like that)

For your purpose, I think is parallax.js is overkill. You can just use background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;.

Your content has 80vh and when it overflows it (panels do that), then it will fuck up your footer and other content. Maybe you could use position: absolute;.

answered Nov 11 '18 at 16:36

Martin Homola

255
1
12

Hello! Sorry, copied from my code and didn't want to paste ALL of the code, that's why the `` and `` are missing, will fix right now. – M0NST4H Nov 11 '18 at 18:33
I don't know, I like how the parallax.js does when I scroll on the website, will your code do the same kind of thing or will it just stay fixed in place? I also have another parallax window at the top of the website by the way. – M0NST4H Nov 11 '18 at 18:34
Ok. Maybe I didnt fully get your problem. Life example would be better in your case. But if you replace `
` with `
`, it could help. – Martin Homola Nov 11 '18 at 18:57
Hmm.. Still seems like it can't be pushed by the collapsible for some reason, this is so weird, because it worked earlier and I have tried going back in the code to when it was working, and it seems like it is very inconsistent because sometimes it works and sometimes it doesn't (without changing anything in the code). – M0NST4H Nov 11 '18 at 19:36
If you put
after body and
before footer, your footer will be pushed down by content. But that's all how can I help you. Good luck with other stuffs. – Martin Homola Nov 11 '18 at 21:38
Thank you for trying to help, this did sadly not fix my problem, I will temporarily put the image as `` instead of using a parallax and continue trying to fix this issue. Good luck to you too! – M0NST4H Nov 11 '18 at 21:45

Bootstrap collapsible not pushing down parallax

1 Answers1