Tablet and mobile navbar

The navigation of tablet and mobile device with right side toggle menu items and search input.

Thumbnail

.navbarM(uk-sticky class='[email protected]')
  nav.uk-background-secondary.navbar-mobile(uk-navbar style='height:60px;')
    .uk-navbar-left
      h1.uk-margin-remove-bottom(style='margin-left:15px;')
        a.link-opacity(href='/')
          img(src='img/logo.svg' style='transform:scale(.7);transform-origin:0 50%')
    .uk-navbar-right.uk-flex-stretch
      ul.uk-navbar-nav
        li
          a.toggle.uk-position-relative.uk-background-primary#btnNavbarNavM(href='#', uk-toggle='target: #navbarNavM' style='width:60px;min-height:60px')
            i.text-white.uk-position-center(uk-icon='icon: menu; ratio: 2')
            i.text-white.uk-position-center(uk-icon='icon: close; ratio: 2' style='display: none;')
  .scrollIndicator.uk-background-primary(style="height:6px;width:0;")
#navbarNavM(uk-offcanvas="flip: true; overlay: true; esc-close: false; bg-close: false" style="top: 60px;" class='[email protected]')
  .uk-offcanvas-bar.navbar-m(style='background-color:#fc9202;box-shadow:0 0 0')
    form.uk-padding-default(method='get' action="")
      .uk-position-relative
        input.uk-input.text-small(type='text' max='100' name='s' placeholder='輸入關鍵字...' style='height:32px;padding:0 10px;border-radius:5px')
        button.uk-position-center-right(type='submit')
          img.uk-text-primary(src='img/icon-search_orange.svg' uk-svg)
    ul
      each i in header
        each j in i.navbar
          each k,index in j.nav
            if index===0
              li.uk-active
                a(href=k.href) 
                  i.icon.icon-nav-lectures-w=k.text
                  span.uk-position-center-right(uk-icon='chevron-right')
            else 
              li
                a(href=k.href) 
                  i.icon.icon-nav-lectures-w=k.text
                  span.uk-position-center-right(uk-icon='chevron-right')
.navbar-m {
  padding: 0!important;
  ul {
    li {
      a {
        position: relative;
        display: block;
        padding: 15px 30px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.35);
        span {
          right: 15px;
          svg {
            transform: scale(1.2);
            polyline {
              stroke-width: 1.5;
            }
          }
        }
      }
      &:first-child {
        border-top: 1px solid rgba(255,255,255,.35)
      }
      &.uk-active {
        a {
          background-color: rgba(253, 230, 0,.4);
          &:before {
            content: '';
            @include pos-a(50%,'','',15px,6px,6px,5);
            background-color: $global-secondary-background;
            border-radius: 100%;
            margin-top: -2px;
          }
        }
      }
    }
  }
}
document.addEventListener('DOMContentLoaded',()=>{
  let icon = vars.btnNavbarNavM.querySelectorAll('i')
  vars.navbarNavM.addEventListener('show',e=>{
    icon[1].style.display = 'block'
    icon[0].style.display = 'none'
  })
  vars.navbarNavM.addEventListener('hide',e=>{
    icon[0].style.display = 'block'
    icon[1].style.display = 'none'
  })
})
<div class="navbarM [email protected]" uk-sticky="uk-sticky">
  <nav class="uk-background-secondary navbar-mobile" uk-navbar="uk-navbar" style="height:60px;">
    <div class="uk-navbar-left">
      <h1 class="uk-margin-remove-bottom" style="margin-left:15px;"><a class="link-opacity" href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg" style="transform:scale(.7);transform-origin:0 50%"/></a></h1>
    </div>
    <div class="uk-navbar-right uk-flex-stretch">
      <ul class="uk-navbar-nav">
        <li><a class="toggle uk-position-relative uk-background-primary" id="btnNavbarNavM" href="#" uk-toggle="target: #navbarNavM" style="width:60px;min-height:60px"><i class="text-white uk-position-center" uk-icon="icon: menu; ratio: 2"></i><i class="text-white uk-position-center" uk-icon="icon: close; ratio: 2" style="display: none;"></i></a></li>
      </ul>
    </div>
  </nav>
  <div class="scrollIndicator uk-background-primary" style="height:6px;width:0;"></div>
</div>
<div class="[email protected]" id="navbarNavM" uk-offcanvas="flip: true; overlay: true; esc-close: false; bg-close: false" style="top: 60px;">
  <div class="uk-offcanvas-bar navbar-m" style="background-color:#fc9202;box-shadow:0 0 0">
    <form class="uk-padding-default" method="get" action="<?php echo esc_attr(home_url()); ?>">
      <div class="uk-position-relative">
        <input class="uk-input text-small" type="text" max="100" name="s" placeholder="輸入關鍵字..." style="height:32px;padding:0 10px;border-radius:5px"/>
        <button class="uk-position-center-right" type="submit"><img class="uk-text-primary" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-search_orange.svg" uk-svg"/></button>
      </div>
    </form>
    <ul>
      <?php $navs = wp_get_nav_menu_items('main'); foreach($navs as $nav): ?>
      <li <?php echo ( $nav->object_id == get_queried_object_id() ) ? 'class="uk-active"':''; ?>><a href="<?php echo esc_attr($nav->url); ?>"> <i class="icon icon-nav-lectures-w"><?php echo esc_html($nav->title); ?></i><span class="uk-position-center-right" uk-icon="chevron-right"></span></a></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>

Tags: