Sticky navigation bar stops working due to content underneath [duplicate]

Question

I have this navigation bar with position: sticky, but it stops when it reaches the top of the side navigation and the content of the page. I can't change the position tofixed, because then the .ad above it won't be visible. I have added the scripts that belong to the side navigation and the content. How do I make my navigation bar go on, past the content and side navigation?

function sortBooks(upDown) {

        var columns = document.getElementsByClassName("column")

        function pricesToArray(columns) {
            var prices = [];
            for (var index = 0; index < columns.length; index++) {
                var price = columns[index].querySelector('.price').innerText;
                var priceInt = price.substr(1, price.length).replace(',', '.');
                prices[index] = parseFloat(priceInt, 10);
            }
            return prices;
        }

        var prices = pricesToArray(columns);

        function selectionSort(arr, upDown) {
            var minIdx, temp,
                len = arr.length;
            for (var i = 0; i < len; i++) {
                minIdx = i;
                for (var j = i + 1; j < len; j++) {
                    if (upDown) {
                        if (arr[j] < arr[minIdx]) {
                            minIdx = j;
                        }
                    } else {
                        if (arr[j] > arr[minIdx]) {
                            minIdx = j;
                        }
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIdx];
                //replace columns
                replaceColumns(i,minIdx);
                arr[minIdx] = temp;
            }
            return arr;
        }

        function replaceColumns(i,minIdx) {
            var temporaryColumn = columns[i].innerHTML;
            columns[i].innerHTML = columns[minIdx].innerHTML;
            columns[minIdx].innerHTML = temporaryColumn;
        }

        var pricesSorted = selectionSort(prices,upDown);

    }

function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("h4");
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
      switching = true;
    }
  }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}  

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}  


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
    margin: 0;
    background-color: #fcf3e3;
    }
* {box-sizing: border-box;}
.navbar {
    list-style-type: none;
    background-color: #f9eedd;
    width: 100%;
    margin: 0;
    padding: 0 20%;
    z-index: 10;
    position: sticky;
    top: 0;
    height: 7vmin;
    }
.navbar li a{
    display: block;
    color: #8e8275;
    text-decoration: none;
    padding: 1.5vmin 1vmin 1.2vmin 1vmin;
    margin: 1.3vmin;
    }
.navbar li.links {float: left;}
.navbar li.rechts {float: right;}
.navbar li a:hover {color: #252118;}
.navbar .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fef6e9;
    min-width: 13vmin;
    z-index: 10;
    top: 7vmin;
    margin: 0 2vmin;
    }
.navbar .dropdown-content a {
    text-align: left;
    margin: 0;
    padding: 1.5vmin 1.3vmin;
    }
.navbar li.icon {display: none;}
.ad {
    background-color: #fbf4e9;
    text-align: center;  
    font-size: 1.5vmin;
    padding: .5vmin;
    }
.webshoptekst {
    margin: 5vmin 10% 0 10%;
    }
.row {margin-left: 27vmin;}
.column {
    float: left;
    display: none;
    padding: 0 1.5vmin 1.5vmin 0;
    width: 33.3%;
    }
.kaartje {
    background-color: #FFFF;
    padding: 1.2vmin;
    text-align: center;
    max-width: 20vmin;
    height: 40vmin;
    position: relative;
    }
.kaartje div {height: 18vmin;}  
.kaartje div > img {height: 100%;} 
h4 {
    margin: 0;
    font-size: 1.9vmin;
    min-height: 6vmin;
    }
h6 {
    margin: 0;
    font-size: 1.4vmin;
    font-weight: normal;
    }
.price {
    color: #777676;
    margin-top: .8vmin;
    font-size: 1.4vmin;
    }
.winkelwagen{
    bottom: 0;
    position: absolute;
    left: 0;
    padding: 1.2vmin;
    width: 100%;
    }
.kaartje button {
    border: none;
    outline: none;
    padding: 1vmin;
    color: #FFFF;
    background-color: #000;
    cursor: pointer;
    font-size: 1vmin;
    }
.kaartje button:hover {opacity: 0.7;}
.show {display: block;}

.sidenav {
    width: 25vmin;
    float: left;
    box-shadow: 0px 1px 3px 0px #c4b29c;
    }
.dropdown-btn {
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    font-size: 2.5vmin;
    color: #655f5a;
    border: none;
    background-color: #f5e8d2;
    cursor: pointer;
    outline: none;
    width: 100%;
    text-align:left;
    }
.dropdown-container {
    display: none;
    background-color: #efe6d8;
    padding-left: .8vmin;
    }

.collapsible2 {
    outline: none;
    border: none;
    color: #655f5a;
    background-color: #efe6d8;
    cursor: pointer;
    width: 24vmin;
    font-size: 2.4vmin;
    text-align: left;
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    }
.dropdown-btn:hover, .collapsible2:hover {opacity: 0.7;}
.collapsible2:after {
    content: '\002B';
    float: right;
    }
.collapsible2 .active:after {content: "\2212";}
.ccontent {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
    padding-left: .8vmin;
    }
.btn {
    display: block;
    position: relative;
    padding-left: 3.5vmin;
    margin-bottom: 1.2vmin;
    cursor: pointer;
    font-size: 1.8vmin;
    }
.btn input {display: none;}
.checkmark {
    position: absolute;
    left: 0;
    height: 2vmin;
    width: 2vmin;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: inset 0 0 4px 0px #b5a99b;
    }
.btn:hover input ~ .checkmark {background-color: #dcdcdc;}
.btn.activee input:checked ~ .checkmark {background-color: #cccccc;}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    }
.btn input:checked ~ .checkmark:after {display: block;}
.btn .checkmark:after {
    top: 0.68vmin;
    left: 0.68vmin;
    width: 0.64vmin;
    height: 0.64vmin;
    border-radius: 50%;
    background: #98948e;
    }

<div class="ad">Lorem ipsum dolor sit amet, consec</div>

    <ul class="navbar" id="myTopnav">
    <li class="links"><a href="index.html">adipiscing</a></li>
    <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
       <div class="dropdown-content">
        <a href="javascript:void(0)">Loren</a>
        <a href="javascript:void(0)">ipsum</a></div>      </li>
    <li class="rechts"><a href="over-mij.html">sed</a></li>
    <li class="rechts"><a href="webshop.html" class="active">do</a></li>
    <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>

     <div class="webshoptekst">  
      <h1>do</h1>
       <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="sidenav">      
  <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
  <div class="dropdown-container" id="myBtnContainer">


<button type="button" class="collapsible2">Sorteren op</button>
               <div class="ccontent">
                <label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
               </div>      

<button type="button" class="collapsible2">Talen</button>
               <div class="ccontent">
                <label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>  
               </div>

  </div>
</div>  


<div class="row" id="id01">

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
      <h4>Oliver Twist</h4>
      <h6>Charles Dickens</h6>
      <p class="price">€9,99</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
      <h4>The Complete Short Stories</h4>
      <h6>Edgar Allan Poe</h6>
      <p class="price">€7,98</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
      <h4>Romeo en Julia</h4>
      <h6>William Shakespeare</h6>
      <p class="price">€14,55</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
      <h4>Harry Potter en de Steen der Wijzen</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€16,58</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
      <h4>Harry Potter en de Geheime Kamer</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€17,19</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
      <h4>Harry Potter en de Gevangene van Azkaban</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€17,97</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
      <h4>Harry Potter en de Vuurbeker</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€18,43</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
      <h4>All the Bright Places</h4>
      <h6>Jennifer Niven</h6>
      <p class="price">€13,29</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
      <h4>The Fault in our Stars</h4>
      <h6>John Green</h6>
      <p class="price">€11,55</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

</div>
</div>

thingEvery · Accepted Answer

Since its contents of <div class="row"> are all floating, it has no height. Add overflow: auto; to it and your nav will stick correctly.

function sortBooks(upDown) {

  var columns = document.getElementsByClassName("column")

  function pricesToArray(columns) {
    var prices = [];
    for (var index = 0; index < columns.length; index++) {
      var price = columns[index].querySelector('.price').innerText;
      var priceInt = price.substr(1, price.length).replace(',', '.');
      prices[index] = parseFloat(priceInt, 10);
    }
    return prices;
  }

  var prices = pricesToArray(columns);

  function selectionSort(arr, upDown) {
    var minIdx, temp,
      len = arr.length;
    for (var i = 0; i < len; i++) {
      minIdx = i;
      for (var j = i + 1; j < len; j++) {
        if (upDown) {
          if (arr[j] < arr[minIdx]) {
            minIdx = j;
          }
        } else {
          if (arr[j] > arr[minIdx]) {
            minIdx = j;
          }
        }
      }
      temp = arr[i];
      arr[i] = arr[minIdx];
      //replace columns
      replaceColumns(i, minIdx);
      arr[minIdx] = temp;
    }
    return arr;
  }

  function replaceColumns(i, minIdx) {
    var temporaryColumn = columns[i].innerHTML;
    columns[i].innerHTML = columns[minIdx].innerHTML;
    columns[minIdx].innerHTML = temporaryColumn;
  }

  var pricesSorted = selectionSort(prices, upDown);

}

function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("h4");
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
      switching = true;
    }
  }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
  margin: 0;
  background-color: #fcf3e3;
}

* {
  box-sizing: border-box;
}

.navbar {
  list-style-type: none;
  background-color: #f9eedd;
  box-shadow: 0px 5px 5px -6px #c4b29c;
  font-family: Georgia, "Times New Roman", Serif;
  width: 100%;
  margin: 0;
  padding: 0 20%;
  z-index: 10;
  position: sticky;
  top: 0;
  height: 7vmin;
}

.navbar li a {
  display: block;
  color: #8e8275;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: .1vmin;
  font-size: 1.6vmin;
  padding: 1.5vmin 1vmin 1.2vmin 1vmin;
  margin: 1.3vmin;
}

.navbar li.links {
  float: left;
}

.navbar li.rechts {
  float: right;
}

.navbar li a:hover {
  color: #252118;
}

.navbar li a.active,
.navbar .dropdown-content a.active {
  text-decoration: underline
}

.navbar .dropdown-content a.active {
  background-color: #f3e9da;
}

.navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fef6e9;
  min-width: 13vmin;
  box-shadow: 0px 2px 5px .1px rgba(0, 0, 0, 0.2);
  z-index: 10;
  top: 7vmin;
  margin: 0 2vmin;
}

.navbar .dropdown-content a {
  text-align: left;
  margin: 0;
  padding: 1.5vmin 1.3vmin;
}

.navbar .dropdown-content a:hover {
  background-color: #f7eedc;
}

.navbar .dropdown:hover .dropdown-content {
  display: block;
}

.navbar li.icon {
  display: none;
}

.ad {
  background-color: #fbf4e9;
  text-align: center;
  font-size: 1.5vmin;
  padding: .5vmin;
}

.webshoptekst {
  letter-spacing: .06vmin;
  font-family: Arial, Verdana, Sans-serif;
  margin: 5vmin 10% 0 10%;
}

.row {
  margin-left: 27vmin;
  overflow: auto;
}

.column {
  float: left;
  display: none;
  padding: 0 1.5vmin 1.5vmin 0;
  width: 33.3%;
}

.kaartje {
  background-color: #FFFF;
  padding: 1.2vmin;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 20vmin;
  height: 40vmin;
  position: relative;
}

.kaartje div {
  height: 18vmin;
}

.kaartje div>img {
  height: 100%;
}

h4 {
  margin: 0;
  font-size: 1.9vmin;
  min-height: 6vmin;
}

h6 {
  margin: 0;
  font-size: 1.4vmin;
  font-weight: normal;
}

.price {
  color: #777676;
  margin-top: .8vmin;
  font-size: 1.4vmin;
}

.winkelwagen {
  bottom: 0;
  position: absolute;
  left: 0;
  padding: 1.2vmin;
  width: 100%;
}

.kaartje button {
  border: none;
  outline: none;
  padding: 1vmin;
  color: #FFFF;
  background-color: #000;
  cursor: pointer;
  font-size: 1vmin;
}

.kaartje button:hover {
  opacity: 0.7;
}

.show {
  display: block;
}

.sidenav {
  width: 25vmin;
  float: left;
  box-shadow: 0px 1px 3px 0px #c4b29c;
}

.dropdown-btn {
  padding: .6vmin .8vmin .6vmin 1.6vmin;
  font-size: 2.5vmin;
  color: #655f5a;
  border: none;
  background-color: #f5e8d2;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: left;
}

.dropdown-container {
  display: none;
  background-color: #efe6d8;
  padding-left: .8vmin;
}

.collapsible2 {
  outline: none;
  border: none;
  color: #655f5a;
  background-color: #efe6d8;
  cursor: pointer;
  width: 24vmin;
  font-size: 2.4vmin;
  text-align: left;
  padding: .6vmin .8vmin .6vmin 1.6vmin;
}

.dropdown-btn:hover,
.collapsible2:hover {
  opacity: 0.7;
}

.collapsible2:after {
  content: '\002B';
  float: right;
}

.collapsible2 .active:after {
  content: "\2212";
}

.ccontent {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
  padding-left: .8vmin;
}

.btn {
  display: block;
  position: relative;
  padding-left: 3.5vmin;
  margin-bottom: 1.2vmin;
  cursor: pointer;
  font-size: 1.8vmin;
}

.btn input {
  display: none;
}

.checkmark {
  position: absolute;
  left: 0;
  height: 2vmin;
  width: 2vmin;
  background-color: #eee;
  border-radius: 50%;
  box-shadow: inset 0 0 4px 0px #b5a99b;
}

.btn:hover input~.checkmark {
  background-color: #dcdcdc;
}

.btn.activee input:checked~.checkmark {
  background-color: #cccccc;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.btn input:checked~.checkmark:after {
  display: block;
}

.btn .checkmark:after {
  top: 0.68vmin;
  left: 0.68vmin;
  width: 0.64vmin;
  height: 0.64vmin;
  border-radius: 50%;
  background: #98948e;
}

<div class="ad">Lorem ipsum dolor sit amet, consec</div>

<ul class="navbar" id="myTopnav">
  <li class="links"><a href="index.html">adipiscing</a></li>
  <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
    <div class="dropdown-content">
      <a href="javascript:void(0)">Loren</a>
      <a href="javascript:void(0)">ipsum</a></div>
  </li>
  <li class="rechts"><a href="over-mij.html">sed</a></li>
  <li class="rechts"><a href="webshop.html" class="active">do</a></li>
  <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>

<div class="webshoptekst">
  <h1>do</h1>
  <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="sidenav">
    <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
    <div class="dropdown-container" id="myBtnContainer">


      <button type="button" class="collapsible2">Sorteren op</button>
      <div class="ccontent">
        <label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
      </div>

      <button type="button" class="collapsible2">Talen</button>
      <div class="ccontent">
        <label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>
      </div>

    </div>
  </div>


  <div class="row" id="id01">

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
        <h4>Oliver Twist</h4>
        <h6>Charles Dickens</h6>
        <p class="price">€9,99</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
        <h4>The Complete Short Stories</h4>
        <h6>Edgar Allan Poe</h6>
        <p class="price">€7,98</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
        <h4>Romeo en Julia</h4>
        <h6>William Shakespeare</h6>
        <p class="price">€14,55</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
        <h4>Harry Potter en de Steen der Wijzen</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€16,58</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
        <h4>Harry Potter en de Geheime Kamer</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€17,19</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
        <h4>Harry Potter en de Gevangene van Azkaban</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€17,97</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
        <h4>Harry Potter en de Vuurbeker</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€18,43</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
        <h4>All the Bright Places</h4>
        <h6>Jennifer Niven</h6>
        <p class="price">€13,29</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
        <h4>The Fault in our Stars</h4>
        <h6>John Green</h6>
        <p class="price">€11,55</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

  </div>
</div>

Sticky navigation bar stops working due to content underneath [duplicate]

Tags:

javascript

html

css

sticky

Laura

1 Answers

thingEvery

Recent Activity

Donate For Us

Sticky navigation bar stops working due to content underneath [duplicate]

Tags:

javascript

html

css

sticky

Laura

1 Answers

thingEvery

Related questions

Recent Activity

Donate For Us