<header class="page-header uk-box-shadow-medium uk-background-default" uk-sticky>
  <div class="uk-container uk-container-expand uk-height-1-1">
    <nav class="uk-height-1-1" uk-navbar="dropbar: true">
      <a href="" class="uk-flex uk-flex-middle">
        <img width="178" height="38" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/horizontal-logo-mobile.svg" alt="forecastr logo">
      </a>

      <ul class="uk-navbar-nav uk-navbar-center uk-visible@l">
        <li class="multi">
          <a href="">
            Platform
            <span uk-icon="icon: chevron-down"></span>
          </a>

          <div class="uk-navbar-dropdown uk-padding-remove-top uk-padding-remove-bottom" uk-dropdown="boundary: .uk-navbar-nav; boundary-align: true; pos: bottom-justify">
            <ul class="uk-nav uk-navbar-dropdown-nav uk-column-1-3">
              <li>
                <span uk-icon="icon: cog"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">For Companies</li>
                  <li><a href="#">Build</a></li>
                  <li><a href="#">Train</a></li>
                  <li><a href="#">Compare</a></li>
                </ul>
              </li>
              <li>
                <span uk-icon="icon: lock"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">For Individuals</li>
                  <li><a href="#">Build</a></li>
                  <li><a href="#">Train</a></li>
                  <li><a href="#">Compare</a></li>
                </ul>
              </li>
              <li>
                <span uk-icon="icon: tag"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">For Family</li>
                  <li><a href="#">Build</a></li>
                  <li><a href="#">Train</a></li>
                  <li><a href="#">Compare</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="">Customers</a>
        </li>
        <li class="multi">
          <a href="">
            Solutions
            <span uk-icon="icon: chevron-down"></span>
          </a>
          <div class="uk-navbar-dropdown uk-padding-remove-top uk-padding-remove-bottom" uk-dropdown="boundary: .uk-navbar-nav; boundary-align: true; pos: bottom-justify">
            <ul class="uk-nav uk-navbar-dropdown-nav uk-column-1-2">
              <li>
                <span uk-icon="icon: lifesaver"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">Business</li>
                  <li><a href="#">For Marketing</a></li>
                  <li><a href="#">For Sales</a></li>
                </ul>
              </li>
              <li>
                <span uk-icon="icon: comments"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">Education</li>
                  <li><a href="#">For Teachers</a></li>
                  <li><a href="#">For Students</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="">Pricing</a>
        </li>
        <li>
          <a href="">
            Resources
            <span uk-icon="icon: chevron-down"></span>
          </a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li><a href="#">Blog</a></li>
              <li><a href="#">Documentation</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </div>
        </li>
      </ul>

      <div class="uk-navbar-right">
        <button class="uk-icon-link uk-margin-right" uk-icon="search" type="button" aria-label="Toggle Search Form"></button>
        <a href="#" class="uk-icon-link" uk-icon="heart" aria-label="Open Wishlist Page"></a>
        <button class="uk-margin-left uk-hidden@l" uk-toggle="target: #offcanvas" uk-icon="icon: menu" type="button" aria-label="Toggle Mobile Menu"></button>
      </div>
    </nav>
  </div>

  <div class="offcanvas uk-hidden@l" id="offcanvas" uk-offcanvas="flip: true; overlay: true; mode: reveal">
    <div class="uk-offcanvas-bar">
      <button class="uk-offcanvas-close" type="button" uk-close aria-label="Close Mobile Menu"></button>

      <ul class="top-menu uk-nav uk-margin-top">
        <li>
          <a href="">
            Platform
          </a>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">For Companies</li>
            <li><a href="#">Build</a></li>
            <li><a href="#">Train</a></li>
            <li><a href="#">Compare</a></li>
          </ul>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">For Individuals</li>
            <li><a href="#">Build</a></li>
            <li><a href="#">Train</a></li>
            <li><a href="#">Compare</a></li>
          </ul>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">For Family</li>
            <li><a href="#">Build</a></li>
            <li><a href="#">Train</a></li>
            <li><a href="#">Compare</a></li>
          </ul>
        </li>
        <li>
          <a href="">Customers</a>
        </li>
        <li>
          <a href="">Solutions</a>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">Business</li>
            <li><a href="#">For Marketing</a></li>
            <li><a href="#">For Sales</a></li>
          </ul>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">Education</li>
            <li><a href="#">For Teachers</a></li>
            <li><a href="#">For Students</a></li>
          </ul>
        </li>
        <li>
          <a href="">Pricing</a>
        </li>
        <li>
          <a href="">Resources</a>
          <ul class="sub-menu uk-nav">
            <li><a href="#">Blog</a></li>
            <li><a href="#">Documentation</a></li>
            <li><a href="#">FAQ</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>

<section class="banner uk-flex uk-flex-middle uk-text-center">
  <div class="uk-container">
    <h1>A Responsive Mega Menu With UIkit</h1>
  </div>
</section>

<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>
html {
  background: #e0e0e0;
}

.page-header {
  height: 80px;
}

.page-header .uk-navbar-nav > li > a,
.page-header .uk-icon-link,
.page-header .uk-icon-link:hover {
  color: #333;
}

.page-header .uk-navbar-nav > li > a {
  padding: 0 25px;
}

.page-header .uk-navbar-nav > li > a:hover {
  background: #f6f7f9;
}

/* just in case you want to remove the default white color */
/* 
.page-header .uk-navbar-dropdown {
  background: transparent;
}*/

.page-header .uk-navbar-dropdown-nav .uk-nav-header {
  color: #7c2a8a;
}

.page-header [class*="uk-column-"] > li {
  padding: 25px 0;
}

.page-header [class*="uk-column-"] > li:not(:last-child) {
  border-right: 1px solid #e5e5e5;
}

.page-header [class*="uk-column-"] .uk-icon {
  color: #c6c6c6;
}

.offcanvas .uk-nav-header {
  color: rgba(246, 247, 249, 0.5);
}

.offcanvas .top-menu > li + li {
  margin-top: 10px;
}

.offcanvas .sub-menu {
  border-left: 1px solid #484848;
}

.offcanvas .sub-menu li {
  padding-left: 30px;
}

.offcanvas .sub-menu li.uk-nav-header {
  padding-left: 10px;
}

.banner {
  height: calc(100vh - 80px);
}

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

.page-footer a {
  display: flex;
  margin-left: 7px;
}

External CSS

  1. https://cdn.jsdelivr.net/npm/uikit@3.10.1/dist/css/uikit.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/uikit@3.10.1/dist/js/uikit.min.js
  2. https://cdn.jsdelivr.net/npm/uikit@3.10.1/dist/js/uikit-icons.min.js