CMS v3 MENU LAYOUT IN DESIGN

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<div class="tm-page tm-page-full-width"><!-- Toggle .tm-page-fluid - Part of design layout https://jsfiddle.net/Greggg/sohrgmhd/ -->
  <div class=""><!-- Toggle .uk-margin-auto to center or not boxed layout - Part of design layout https://jsfiddle.net/Greggg/sohrgmhd/ -->
  
    <!-- START HEADER -->
    <div class="tm-header uk-position-absolute uk-visible@s"><!-- Toggle .uk-position-absolute to overlap nav on first header section -->

      <!-- START NAV -->
      <div class="uk-navbar-container" data-uk-sticky="animation: uk-animation-slide-top; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200">
      <div class="uk-container uk-container-expand"><!-- Toggle .uk-container-expand to swith boxed or fluid nav -->
        <nav class="uk-navbar" data-uk-navbar>
          <div class="uk-navbar-left">
          <div class="tm-logo">
            <a href="#" class="uk-navbar-item uk-logo">
              <img src="https://getuikit.com/docs/images/logo-placeholder.svg" class="uk-responsive-height" alt="">
              <img src="https://getuikit.com/docs/images/logo-placeholder-light.svg" class="uk-responsive-height uk-logo-inverse" alt=""></a>
              </div>
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Item 1</a></li>
              <li class="uk-active"><a href="#">Item 2</a></li>
              <li class="uk-parent">
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class=""><a href="#">Child 1</a></li>
                    <li class=""><a href="#">Child 1</a></li>
                  </ul>
                </div>
              </li>
            </ul>
         ...

CSS

html {
  background: #CAE2E5;
}


@media (min-width: 1200px) {
  .tm-page:not(.tm-page-full-width)>* {
    position: relative;
    max-width: 1200px;
  }
}

.tm-header {
  width: 100%;
  z-index: 1000;
}