Responsive Menu UiKit 3

index.pug

doctype html

//- logo
- var logo_white="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png"

.uk-offcanvas-content
  // menu position. delete .uk-light to change black navbar to white (also you should change logo to dark one)
  //- https://getuikit.com/docs/sticky#responsive
  nav.uk-navbar-container.uk-light(uk-navbar="mode: click" uk-sticky="animation: uk-animation-slide-top; show-on-up: true")
    // logo or title
    .uk-navbar-left.nav-overlay
      a.uk-navbar-item.uk-logo(href="#")
        //h3 Site Name
        img(src=logo_white alt="logo" width="64")
    // end logo or title
    // menu
    .uk-navbar-right.nav-overlay
      .uk-navbar-flip
        ul.uk-navbar-nav(class="uk-visible@s")
          li.uk-active
            a(href="#") Item 1
          each i in [2,3,4,5,6]
            li
              a(href="#") Item #{i}
          li
            a.uk-navbar-toggle(uk-search-icon uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#")
        ul.uk-navbar-nav(class="uk-hidden@s")
          li
            a.uk-navbar-toggle(uk-search-icon uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#")
          li
            a.uk-navbar-toggle(uk-navbar-toggle-icon uk-toggle="target: #mobile-navbar" )
    // endmenu
    // Overlay Search
    .nav-overlay.uk-navbar-left.uk-flex-1(hidden)
      .uk-navbar-item.uk-width-expand
        form.uk-search.uk-search-navbar.uk-width-1-1
          input.uk-search-input(type="search" placeholder="Search..." autofocus)
      a.uk-navbar-toggle(uk-close uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#")
    // end overlay search
  // end menu position

  // off-canvas menu
  #mobile-navbar(uk-offcanvas="mode: slide; flip: false")
    .uk-offcanvas-bar
      // off-canvas close button
      button.uk-offcanvas-close(type="button" uk-close)
      // off-canvas close button
      ul.uk-nav-default.uk-nav-parent-icon(uk-nav)
        // logo or title
        li(style="padding: 0 0 25px 0").uk-text-center
          a(href="#")
            //h3 Site Name
            img(src=logo_white alt="logo" width="64")
        // end logo or title
        // menu
        li
          hr
        li.uk-text-center
          h3 Menu
        li.uk-active
          a(href="#") Item 1
            //span.uk-light(uk-icon="icon: pencil")
            //| #{" "}Item 1
        each i in [2,3,4,5,6]
          li
            a(href="#") Item #{i}
                //span.uk-light(uk-icon="icon: code")
                //| #{" "}Item #{i}#{j}
  // end off-canvas menu
  
.uk-flex.uk-flex-center.uk-margin-top
  .uk-card.uk-card-primary.uk-card-body
    h3 This is a Responsive navbar w/ <a href="https://getuikit.com/" target="_blank">UiKit</a>

.uk-flex.uk-flex-right.uk-margin-bottom.uk-position-bottom-right
  .uk-card.uk-card-default.uk-card-body
    span
      | Made with <font color="red">♥</font> by <a href="https://codepen.io/vaedasti" target="_blank">Vaedasti</a>

responsive-menu-uikit-3.markdown

Responsive Menu UiKit 3

It's a responsive navbar with UiKit

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>

style.sass

$color: #222

.uk-navbar-container.uk-light:not(.uk-navbar-transparent):not(.uk-navbar-primary)
  background: $color

#mobile-navbar
  .uk-offcanvas-bar
    box-shadow: 2px 0 5px 0 ($color - 20)
  li:nth-child(1),
  li:nth-child(2),
  li:nth-child(3)
    border-left: unset
  li
    padding-left: 5px
    border-left: 2px solid transparent
    &.uk-active
      padding-left: 5px
      border-left: 2px solid ($color + 50)

.uk-sticky-fixed
  box-shadow: 0 1px 5px 0 ($color - 20)

styles

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