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: