Off-canvas :: mobile navigation & Transperent Hero & parallax effect | uiKit - front-end framework. 3.0.0-rc.26

index.html

<!-- codepen editor mode - you could open the HTML tab in full width + only one extra line of CSS (not in uikit) on this example 
**since rc.20(October 24, 2018)Offcanvas no longer requires a wrapping content div
-->
<!-- desktop sticky navbar -->
<div class="uk-position-top" id="top">
  <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar="dropbar: false;" data-uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky uk-section-primary uk-light; bottom: #scrollup-dropdown">
    <!-- LEFT -->
    <div class="uk-navbar-left uk-light">
      <a class="uk-navbar-item uk-logo" href="#">Logo-desktop</a>
      <!-- show ul on desktop-tablet with uk-visible@m = Only affects device widths of 960px and larger-->
      <ul class="uk-navbar-nav uk-visible@m">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
          <a href="#">Parent 
              <span data-uk-icon="icon: triangle-down; ratio: 0.7"></span>
            </a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav uk-visible@m">
              <li class="uk-active"><a href="#">Active Child</a></li>
              <li><a href="#">Child </a></li>
              <li><a href="#">Child</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
    <!-- toogle icon visible only on phones -->
    <div class="uk-navbar-right">
      <!--off-canvas btn show only on mobile -->
      <a class="uk-navbar-toggle uk-hidden@m" href="#" uk-toggle="target: #offcanvas-nav-primary">
        <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span>
      </a>
    </div>
  </nav>
</div>
<!-- OFF-CANVAS NAVBAR -->
<nav id="offcanvas-nav-primary" uk-offcanvas="overlay: true; mode: push; flip: true">
  <!-- offcanvas setting  -->
  <div class="uk-offcanvas-bar uk-flex uk-flex-column">
    <!-- navbar content her -->
    <!-- A - logo -->
    <a class="uk-align-left uk-logo" href="#">Logo - offcanvas</a>
    <!-- B - nav -->
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
      <li class="uk-active"><a href="#">Active - offcanvas</a></li>
      <li class="uk-parent">
        <a href="#">Parent - offcanvas</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Child one - offcanvas</a></li>
          <li><a href="#">Child two - offcanvas</a></li>
        </ul>
      </li>
      <li class=""><a href="#">ITEM - offcanvas</a></li>
    </ul>
    <!--contact us -->
    <div class="uk-margin-large-top">
      <hr>
      <span uk-icon="icon: phone"></span>
      <a class="uk-link-text" href="#">+972 3434 3435</a>
    </div>
  </div>
</nav>

<header id="hero-header">
  <section class="uk-section-secondary">
    <!-- change her the bg image + The overlay color/opacity/direction (under style="") -->
    <div id="change-her-the-bg-image" class="uk-background-norepeat uk-background-cover uk-background-center-center uk-background-image@s uk-section uk-section-large uk-flex uk-flex-middle" uk-parallax="bgx: 0,-60" uk-height viewport="offset-top: false" style="background: linear-gradient(to right, rgba(30, 75, 115, 0.9), rgba(255, 255, 255, 0)), url('https://picsum.photos/1900/508');">
      <div class="uk-width-1-1">
        <!-- hero container -->
        <div class="uk-container uk-container-large">
          <!-- Heading: Add margin top for h1 - like this the text looks more center v beacuse the navbar is transpernt -->
          <h1 class="uk-margin-small uk-margin-medium-top uk-width-large@m uk-text-left@m uk-text-center uk-h6 uk-heading-line" uk-parallax="opacity: 1,0;viewport: 0.95;media: @s">
            <!-- extra span for uk-heading-line -->
            <span>UiKit Navbar & Hero With OffCanvas</span>
          </h1>
          <h2 class="uk-margin-small uk-text-left@m uk-text-center uk-heading-hero" uk-parallax="y: 0,60;opacity: 1,0;easing: 0.8;viewport: 0.95;media: @s">
            UIKIT Hero
          </h2>
          <!-- Arrow: With link to #main section + uk-scroll="" for smooth scrolling -->
          <div class="uk-margin uk-text-left@m uk-text-center" uk-parallax="y: 0,450;opacity: 1,0;easing: 0.3;target: !.uk-section;media: @s">
            <a uk-icon="icon: arrow-down;ratio: 1.5" class="uk-icon-link uk-icon" href="#main" uk-scroll=""></a>
          </div>
        </div>
      </div>
    </div>
  </section>
</header>

<br>

<!-- Demo docs content -->
<main id="main" class="uk-container uk-container-large uk-margin-top">
  <div id="message"></div>
  <button class="uk-button uk-margin uk-button-danger uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-nav-primary">Open-Off-Canvas Menu</button>
  <br>
  <br>
  <div class="uk-card uk-card-default uk-card-body">
    <h1 class="uk-text-medium">UIkit 3 offCanvas navbar example</h1>
    <p>Responsive & mobile support & cool design & Touch-friendly (Open/close)
    </p>
    <ul class="uk-list uk-list-bullet">
      <li><a target="_blank" href="https://getuikit.com/docs/navbar">UIkit 3 navbar docs</a></li>
      <li><a target="_blank" href="https://getuikit.com/docs/offcanvas">UIkit 3 offcanvas docs</a></li>
      <li><a target="_blank" href="https://getuikit.com/docs/nav">UIkit 3 nav docs (For the menu inside the offCanvas)</a></li>
      <li><span uk-icon="icon: youtube"></span>
        <a target="_blank" href=" https://www.youtube.com/watch?v=MfdMfobt3l4">uikit 2 "Off-canvas and mobile navigations" tutorial 
						</a>(old but some consept the same in version 3)</li>
    </ul>
  </div>
  <br>
  <a uk-icon="icon: arrow-up;ratio: 1.5" class="uk-icon-link uk-icon" href="#top" uk-scroll="">Back to top</a>

</main>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-nav">Default Nav mode push</button>

<nav id="offcanvas-nav" uk-offcanvas="mode:push; flip: true; overlay: true">
  <div class="uk-offcanvas-bar">

    <ul class="uk-nav uk-nav-default">
      <li class="uk-active"><a href="#">Active</a></li>
      <li class="uk-parent">
        <a href="#">Parent</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Sub item</a></li>
          <li><a href="#">Sub item</a></li>
        </ul>
      </li>
      <li class="uk-nav-header">Header</li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
      <li class="uk-nav-divider"></li>
      <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>

  </div>
</nav>

off-canvas-mobile-navigation-transperent-hero-parallax-effect-uikit-front-end-framework-3-0-0-rc-26.markdown

Off-canvas :: mobile navigation & Transperent Hero & parallax effect | uiKit - front-end framework. 3.0.0-rc.26

Uikit - Framework - Touch-friendly Off-canvas navigations example.

A Pen by Beibit Sakhanov on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>

style.css

/* add background transition when you roll up and the navbar change back to transperenty */
.uk-navbar-container{
  transition: background-color 0.5s ease;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet" />