<section id="skogafoss" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="https://assets.codepen.io/162656/skogafoss-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Skógafoss</span>
  </div>
</section>
<section id="akureyri" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="https://assets.codepen.io/162656/akureyri-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Akureyri</span>
  </div>
</section>
<section id="jokulsarlon" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="https://assets.codepen.io/162656/jokulsarlon-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Jökulsárlón</span>
  </div>
</section>
<section id="vik" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="https://assets.codepen.io/162656/vik-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Vik</span>
  </div>
</section>
<section id="snaefellsnes" class="uk-background-cover uk-background-norepeat uk-position-relative" data-src="https://assets.codepen.io/162656/snaefellsnes-iceland.jpg" uk-height-viewport uk-img>
  <div class="uk-position-small uk-position-bottom-center" uk-scrollspy="cls: uk-animation-fade; delay: 200; repeat: true">
    <svg class="uk-position-cover uk-height-1-1" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
      <path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82" />
    </svg>
    <span class="uk-display-block uk-position-relative uk-position-z-index uk-text-center uk-text-large">Snaefellsnes</span>
  </div>
</section>

<nav class="secondary-nav uk-position-fixed uk-overflow-auto" uk-scrollspy-nav="closest: li; scroll: true">
  <ul class="uk-list uk-margin-remove">
    <li class="uk-margin-remove-top uk-margin-bottom">
      <a href="#skogafoss" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="https://assets.codepen.io/162656/cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="https://assets.codepen.io/162656/circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Skógafoss
      </a>
    </li>
    <li class="uk-margin-remove-top uk-margin-bottom">
      <a href="#akureyri" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="https://assets.codepen.io/162656/cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="https://assets.codepen.io/162656/circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Akureyri
      </a>
    </li>
    <li class="uk-margin-remove-top uk-margin-bottom">
      <a href="#jokulsarlon" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="https://assets.codepen.io/162656/cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="https://assets.codepen.io/162656/circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Jökulsárlón
      </a>
    </li>
    <li class="uk-margin-remove-top uk-margin-bottom">
      <a href="#vik" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="https://assets.codepen.io/162656/cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="https://assets.codepen.io/162656/circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Vik
      </a>
    </li>
    <li class="uk-margin-remove-top">
      <a href="#snaefellsnes" class="uk-flex uk-link-reset">
        <span class="icons uk-position-relative uk-flex uk-margin-right">
          <img width="20" height="18" data-src="https://assets.codepen.io/162656/cirle-outlined.svg" alt="" uk-img>
          <img width="19" height="16" class="mark-filled uk-position-center" data-src="https://assets.codepen.io/162656/circle-filled.svg" alt="" uk-img uk-svg>
        </span>
        Snaefellsnes
      </a>
    </li>
  </ul>
</nav>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --green: #47b293;
  --gray: #faf9f8;
  --black: #000;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--black);
  font-family: "Ubuntu Mono", monospace;
}


/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section[data-src] {
  background-color: var(--gray);
}

section svg {
  fill: var(--green);
}

section span {
  padding: 10px 20px;
  min-width: 185px;
}

.secondary-nav {
  top: 50px;
  right: 0;
  font-size: 20px;
  transform: translateX(calc(100% - 60px));
  transition: transform 0.15s;
}

.secondary-nav:hover {
  transform: none;
}

.secondary-nav ul {
  padding: 20px;
  border-radius: 7px 0 0 7px;
  background-color: rgba(255, 255, 255, 0.5);
}

.secondary-nav .icons {
  flex-shrink: 0;
}

.secondary-nav .icons .mark-filled {
  display: none;
  fill: var(--green);
}

.secondary-nav .uk-active .mark-filled {
  display: block;
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  background: white;
}

.page-footer a {
  display: flex;
  margin-left: 9px;
}
const secondaryNav = document.querySelector(".secondary-nav");

setNavBottomPos();
window.addEventListener("resize", function () {
  setNavBottomPos();
});

function setNavBottomPos() {
  const offset = secondaryNav.offsetTop;
  const secondaryNavH = secondaryNav.offsetHeight;
  const windowH = window.innerHeight;

  if (secondaryNavH + offset * 2 > windowH) {
    secondaryNav.style.bottom = offset + "px";
  } else {
    secondaryNav.style.bottom = "auto";
  }
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&amp;display=swap
  2. https://cdnjs.cloudflare.com/ajax/libs/uikit/3.9.4/css/uikit.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/uikit/3.9.4/js/uikit.min.js