Responsive fullwidth navbar
Thumbnail

// <pageNav> .scrollbar-hide(style='overflow: scroll') ul.uk-flex.uk-flex-left each j in i.nav li(style='width: 260px;') a.uk-text-bold.uk-display-block.uk-button.button-gray.uk-text-nowrap(class=j.class href=j.href style='letter-spacing: 1.6px; ')=j.text // </pageNav>
.button-gray { background-color: #edeff1; line-height: 50px; font-size: 1rem; border-right: 1px solid #d7d9db; &:hover { background-color: $global-secondary-background; color: #fff; } } .button-active { background-color: $global-primary-background; color: #fff; }
Header with full-height nav items
Thumbnail

.uk-container.uk-container-xlarge .navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m') each i in header each j in i.navbar div(uk-grid) .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left h1 a(href='/') img(src=j.src) .uk-width-expand.uk-position-relative ul.uk-flex.uk-flex-stretch.uk-flex-right.navbar(style='height: 100%;') each k,index in j.nav if index===0 li.uk-active a.text-medium.uk-text-bold(href=k.href)=k.text else li a.text-medium.uk-text-bold(href=k.href)=k.text each l,index in i.navButton if index===0 li a.uk-button.uk-button-secondary.uk-border-pill.uk-box-shadow-small(href=l.href uk-toggle) img(src=l.src uk-svg) span=l.text else li a.uk-button.uk-button-primary.uk-border-pill.uk-box-shadow-small(href=l.href) img(src=l.src uk-svg) span=l.text
.navbar { li { width: 12%; display: flex; align-items: center; justify-content: center; a { width: 100%; font-size: 1rem; text-align: center; letter-spacing: 0.8px; white-space: nowrap; &:not(.uk-button){ height: 100%; display: flex; justify-content: center; align-items: center; } &:hover { background: $global-secondary-background; border-color: $global-secondary-background; color: #fff; } &.uk-button { width: 144px; margin-left: 10px; line-height: 40px; white-space: nowrap; padding: 0 10px; img + svg { position: relative; top: 3px; margin-right: 7px; } span { font-weight: bold; } } } &.uk-active { a { background: $global-primary-background; color: #fff; } } } } @include mq(1200px){ .navbar li a { letter-spacing: 0; font-size: 14px; } .navbar li a.uk-button { width: 120px; } }
Keyword tag list with search form
The horizontal keyword list with the searching form input.
Thumbnail

.uk-container(class="uk-visible@m") .uk-flex-middle(uk-grid) .uk-width-3-4.uk-flex(style='overflow:scroll') each i in header each j in i.keyword .uk-background-contain.uk-display-block(data-src=j.src uk-img style="width:78px;height:20px;") span.uk-text-bold.text-xsmall.text-white.uk-position-relative.uk-display-block(style="width:75px;top: 4px;left:6px;line-height:.7rem;")=j.title ul.uk-flex each k in j.list li a.text-small.uk-margin-small-left.link-primary.uk-text-nowrap(href=k.href)=k.text .uk-width-1-4 form.uk-position-relative(method='get' action="" style='height: 42px;') input.uk-input.text-small.input-keyword(type='text' max='100' name='s' placeholder='輸入關鍵字...' style='padding:0 0 0 15px') span.uk-position-center-left button.uk-position-center-right(type='submit') img(src='img/icon-search_orange.svg' uk-svg) img(src='img/icon-search_orange.svg')
.input-keyword { & + span { width: 1px; height: 20px; display: block; background-color: #efefef; } & + span + button img:first-child + svg { display: block; } & + span + button img:last-child { display: none; } &:focus { background-color: #efefef; & + span { background-color: #707070; } & + span + button img:first-child + svg { display: none; } & + span + button img:last-child { display: block; } } }
Tags:
Sticky navbar with scroll indicator
The fixed sticky navigation when scrolling page from top 150px. Including the scroll indicator.
Thumbnail

.navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m') each i in header each j in i.navbar div(uk-grid) .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left(style='width:325px;background-color:#ffe403') h1 a(href='/') img(src=j.src) .uk-width-expand.uk-position-relative ul.uk-flex.uk-flex-middle.uk-flex-right.uk-margin-left.navbar(style='width: calc(100% - 160px);height:100%; overflow:scroll') each k,index in j.nav if index===0 li.uk-active a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text else li a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text each l in j.navVideo a.uk-display-block.uk-position-center-right(style='width:140px' class="uk-visible@l") .uk-display-block.uk-background-cover(data-src=l.src uk-img style='width:100%;height:90px;') img.uk-position-center(src=l.icon style='width: 40px; z-index:10') .scrollIndicator.uk-background-secondary(style="height:6px;width:0;")
.navbar-sticky { position: fixed; width: 100%; top: 0; opacity: 0; pointer-events: none; transition: all .8s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-100%); &.uk-sticky-fixed { opacity: 1; pointer-events: auto; transform: translateY(0); } & + .uk-sticky-placeholder {display:none!important} }
/** * Scroll Indicator */ window.onscroll = function () { scrollIndicatior() }; function scrollIndicatior() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; Array.from(vars.scrollIndicator).forEach(element=>{ element.style.width = scrolled + "%"; }) }
<div class="navbar-sticky uk-background-default uk-visible@m" uk-sticky="top: 150" style="z-index:10000"> <div uk-grid="uk-grid"> <div class="uk-padding-default-top uk-padding-default-bottom logo uk-margin-left" style="width:325px;background-color:#ffe403"> <h1><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg"/></a></h1> </div> <div class="uk-width-expand uk-position-relative"> <ul class="uk-flex uk-flex-middle uk-flex-right uk-margin-left navbar scrollbar" style="width: calc(100% - 160px);height:100%; overflow:scroll"> <?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 class="text-medium uk-text-bold uk-text-nowrap link-secondary" href="<?php echo esc_attr($nav->url); ?>" style="margin-right:25px; letter-spacing:2px"><?php echo esc_html($nav->title); ?></a></li> <?php endforeach; ?> </ul> <?php $args_post = array( 'posts_per_page' => 1, 'tax_query' => array( array( 'taxonomy' => 'live', 'field' => 'slug', 'terms' => 'showinlive' ) ) ); $query_post = new WP_Query( $args_post ); if( $query_post->have_posts() ): while( $query_post->have_posts() ): $query_post->the_post();?> <a class="uk-display-block uk-position-center-right uk-visible@l icon-play" style="width:140px" href="<?php echo esc_attr(get_the_permalink()); ?>"> <div class="uk-display-block uk-background-cover" data-src="<?php echo (has_post_thumbnail())?get_the_post_thumbnail_url():get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:100%;height:90px;"></div> <span class="uk-position-center" style='transform: translate(-50%,-50%) scale(.3); z-index:10;'> <svg xmlns="http://www.w3.org/2000/svg" width="147" height="147"><g data-name="Group 2043" transform="translate(-887 -5791)"><circle data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251"/><g data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3"><circle cx="73.5" cy="73.5" r="73.5" stroke="none"/><circle cx="73.5" cy="73.5" r="72" fill="none"/></g><path data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff"/></g></svg> </span> </a> <?php endwhile; wp_reset_postdata();endif; ?> </div> </div> <div class="scrollIndicator uk-background-secondary" style="height:6px;width:0;"></div> </div>
Tags:
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='uk-hidden@m') 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='uk-hidden@m') .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 uk-hidden@m" 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="uk-hidden@m" 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:
- nav
- /
Site’s Navigation with slash background
The site’s main navigation with gradient background and overflow menu items. There is a image button at the right position in navbar.
Thumbail

div(style='background: rgb(255,228,0);background: linear-gradient(90deg, rgba(255,228,0,1) 0%, rgba(255,228,0,1) 50%, rgba(0,0,0,1) 51%);' class='uk-visible@m') .uk-container each i in header each j in i.navbar div(uk-grid) .uk-padding-default-top.uk-padding-default-bottom.logo(style='width:325px') h1 a(href='/') img(src=j.src) .uk-width-expand.uk-position-relative(style='background-color:black') ul.uk-flex.uk-flex-middle.uk-margin-left.navbar(style='width: calc(100% - 160px);height:100%; overflow:scroll') each k,index in j.nav if index===0 li.uk-active a.text-white.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text else li a.text-white.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text each l in j.navVideo a.uk-display-block.uk-position-center-right(style='width:140px' class="uk-visible@l") .uk-display-block.uk-background-cover(data-src=l.src uk-img style='width:100%;height:90px;') img.uk-position-center(src=l.icon style='width: 40px; z-index:10')
.logo { position: relative; &:after { content: ''; @include pos-a(0,-16px,'','',40px,100%,5); background-color: $global-secondary-background; transform: skewX(-20deg); border-right: 10px solid $global-primary-background; } } .navbar { li.uk-active { a { position: relative; color: $global-secondary-background!important; &:before { content: ''; @include pos-a('','',-10px,50%,6px,6px,5); margin-left: -5px; border-radius: 100%; background-color: $global-secondary-background; } } } }
<div class="uk-visible@m" style="background: rgb(255,228,0);background: linear-gradient(90deg, rgba(255,228,0,1) 0%, rgba(255,228,0,1) 50%, rgba(0,0,0,1) 51%);"> <div class="uk-container"> <div uk-grid="uk-grid"> <div class="uk-padding-default-top uk-padding-default-bottom logo" style="width:325px"> <h1><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg"/></a></h1> </div> <div class="uk-width-expand uk-position-relative" style="background-color:black"> <ul class="uk-flex uk-flex-middle uk-margin-left navbar scrollbar" style="width: calc(100% - 160px);height:100%; overflow:scroll"> <?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 class="text-white text-large uk-text-bold uk-text-nowrap link-secondary" href="<?php echo esc_attr($nav->url); ?>" style="margin-right:25px; letter-spacing:2px"><?php echo esc_html($nav->title); ?></a></li> <?php endforeach; ?> </ul> <?php $args_post = array( 'posts_per_page' => 1, 'tax_query' => array( array( 'taxonomy' => 'live', 'field' => 'slug', 'terms' => 'showinlive' ) ) ); $query_post = new WP_Query( $args_post ); if( $query_post->have_posts() ): while( $query_post->have_posts() ): $query_post->the_post();?> <a class="uk-display-block uk-position-center-right uk-visible@l icon-play" href='<?php echo esc_attr(get_the_permalink()); ?>' style="width:140px"> <div class="uk-display-block uk-background-cover" data-src="<?php echo (has_post_thumbnail())?get_the_post_thumbnail_url():get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:100%;height:90px;"></div> <span class="uk-position-center" style='transform: translate(-50%,-50%) scale(.3); z-index:10;'> <svg xmlns="http://www.w3.org/2000/svg" width="147" height="147"><g data-name="Group 2043" transform="translate(-887 -5791)"><circle data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251"/><g data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3"><circle cx="73.5" cy="73.5" r="73.5" stroke="none"/><circle cx="73.5" cy="73.5" r="72" fill="none"/></g><path data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff"/></g></svg> </span> </a> <?php endwhile; wp_reset_postdata();endif; ?> </div> </div> </div> </div>
Tags:
- nav
- /
Topbar with slideshow
The functional navigation with slideshow text links at the top of entire page.
Thumbnail

.uk-container.uk-padding-small-top.uk-padding-small-bottom(class="uk-visible@m") each i in header each j in i.top .uk-grid-collapse(uk-grid) div(style='width:190px') p img.uk-margin-small-right.uk-text-primary(src=j.src uk-svg) span.uk-text-bold.uk-position-relative(style="top:-5px;")=j.title span.uk-text-bold.text-red.uk-margin-left.uk-position-relative(style="top:-5px;") 08:52 AM .uk-width-expand .uk-position-relative(tabindex="-1", uk-slideshow="autoplay:true;max-height: 25;autoplay-interval:5000") ul.uk-slideshow-items each k in j.list li a.text-dark.link-primary(href="single.html")=k.text
Tags: