WooCommerce Bootstrap 4 navbar

WooCommerce Bootstrap 4 navbar
WooCommerce Bootstrap 4 navbar
WooCommerce Demo Descargar
WooCommerce navbar Demo Descargar

Creamos una navbar de Bootstrap 4, configurada para WooCommerce, para un tema de WordPress. Muestra el carrito actual, acceso a cuenta de usuario, permite dos niveles de navegación, alinear sus contenidos y es responsive.

En anteriores snippets, hemos publicado como crear una barra de navegación con Bootstrap 4 Navbar para WordPress, una normal y otra con topmenu, puedes ver estos snippets aquí:

Pero en este caso utilizando lo mismo, la configuramos y adaptamos para soportar el plugin de WooCommerce y que muestre toda la información necesaria de una tienda online.

En este snippet explicamos como crear una barra de navegación con Bootstrap 4 Navbar, para crear una tienda online con WooCommerce, en un tema de WordPress. En realidad utilizaremos dos navbars, una adaptada para ordenadores y otra para dispositivos. Entonces según el ancho de pantalla, varían, lógico, así nos adaptamos mejor a todas las medidas de pantalla.

Entonces veamos los requerimientos y todo el código que necesitaremos insertar en nuestro tema de WordPress.

Requerimientos de sistema

Para organizar bien, toda la información que se da en este snippet, lo dividimos en cinco secciones:

Este es el código que tenemos que añadir al archivo functions.php

Primero encolamos las librerías de estilos CSS y scripts JavaScript, necesarias para que funcione perfectamente nuestra barra de navegación. Requerimos la clase Bootstrap Navwalker, para adaptar el sistema de crear menús de WordPress, a el propio de Bootstrap y registramos un menú.

Creamos la función, si WooCommerce está activado, para actualizar el carrito por Ajax. El carrito se actualizará sin tener que recargar la página, si añadimos nuevos productos al carrito.

Los archivos de estilos, scripts, de como instalarla y configurarla, lo explicamos a continuación, en cada sección.

functions.php


<?php
// Encolar css
function encola_styles() {
  wp_enqueue_style('bootstrap-css', get_template_directory_uri() .'/css/bootstrap.css');
  wp_enqueue_style('style-css', get_template_directory_uri() .'/style.css');
  wp_enqueue_style('mobile-css', get_template_directory_uri() .'/css/navbar-mobile.css');
  wp_enqueue_style('topmenu-css', get_template_directory_uri() .'/css/navbar-topmenu.css');
  wp_enqueue_style('desktop-css', get_template_directory_uri() .'/css/navbar-desktop.css');
}
add_action('wp_enqueue_scripts', 'encola_styles');

// Encolar js
function encola_scripts() {
  wp_enqueue_script('popper-js', get_template_directory_uri() .'/js/popper.min.js', array('jquery'), '1.16.0', true);
  wp_enqueue_script('bootstrap-js', get_template_directory_uri() .'/js/bootstrap.min.js', array('jquery'), '4.4.1', true);
  wp_enqueue_script('mobile-js', get_template_directory_uri() .'/js/navbar-mobile.js', array('jquery'), false, true);
  wp_enqueue_script('desktop-js', get_template_directory_uri() .'/js/navbar-desktop.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'encola_scripts');

// Registrar clase bootstrap navwalker
function registra_navwalker() {
  require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php';
}
add_action('after_setup_theme', 'registra_navwalker');

// Registrar menu woo-navbar
register_nav_menus(array(
  'woo-navbar' => __('Woo Navbar', 'store'),
));

// Si WooCommerce esta activado actualiza con ajax el carrito en topmenu
if ( class_exists( 'woocommerce' ) ) {
  function top_menu_add_to_cart_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    if (WC()->cart->get_cart_contents_count() == 0 ) { ?>
      <a class="nav-link nav-link-cart" href="<?php echo esc_url(apply_filters('woocommerce_return_to_shop_redirect', wc_get_page_permalink('shop'))); ?>" title="<?php esc_html_e('Ir a la Tienda', 'store'); ?>"><?php include esc_url(get_template_directory().'/img/icons/navbar/cart.svg'); ?></a>
    <?php } else { ?>
      <a class="nav-link nav-link-cart" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php esc_html_e('Ir al carrito', 'store'); ?>"><?php include esc_url(get_template_directory().'/img/icons/navbar/cart.svg' ); ?><span class="span-wrap"><?php echo WC()->cart->get_cart_contents_count(); ?> - <?php echo WC()->cart->get_cart_total(); ?></span></a>
    <?php }
    $fragments['a.nav-link-cart'] = ob_get_clean();
    return $fragments;
  }
  add_filter( 'woocommerce_add_to_cart_fragments', 'top_menu_add_to_cart_fragment' );
}
?>

La navbar para móviles solo es visible en pantallas con un ancho máximo de 768 pixeles. El menú es de apertura animada toggle collapse, que tambien utilizamos para desplegar el formulario de búsqueda. Dispone de un acceso directo a la página de productos o al carrito y a la cuenta de usuario.

Veamos el markup de la navbar para móviles.

navbar-mobile.php


<div class="st-navbar-mobile st-navbar-mobile-style d-block d-md-none">
  <div class="container-fluid">
    <div class="row no-gutters align-items-center justify-content-between st-navbar-mobile-row">
    
      <!-- Logo -->
      <div class="col wrap">
        <div class="st-navbar-mobile-logo-text">
          <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo get_bloginfo('description'); ?>">
            <?php include esc_url( get_template_directory() . '/img/logo/smoothemes-logo.svg' ); ?>
          </a>
        </div>
      </div>

      <!-- WooCommerce iconos usuario y carrito -->
      <?php if ( class_exists( 'woocommerce' ) ) {
        global $woocommerce;
        if (is_user_logged_in()) {
          $current_user = wp_get_current_user(); ?>
          <div class="col-auto">
            <div class="st-navbar-mobile-user-icon">
              <a class="user-icon-btn" href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" title="<?php esc_html_e('Ir a Mi Cuenta', 'store'); ?>">
                <?php include esc_url( get_template_directory() . '/img/icons/navbar/user.svg' ); ?>
              </a>
            </div>
          </div>
        <?php } else { ?>
          <div class="col-auto">
            <div class="st-navbar-mobile-user-icon">
              <a class="user-icon-btn" href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" title="<?php esc_html_e('Acceder a Mi Cuenta', 'store'); ?>">
                <?php include esc_url( get_template_directory() . '/img/icons/navbar/user.svg' ); ?>
              </a>
            </div>
          </div>
        <?php } ?>
        <?php if (WC()->cart->get_cart_contents_count() == 0 ) { ?>
          <div class="col-auto">
            <div class="st-navbar-mobile-cart-icon">
              <a class="cart-icon-btn" href="<?php echo esc_url(apply_filters('woocommerce_return_to_shop_redirect', wc_get_page_permalink('shop'))); ?>" title="<?php esc_html_e('Ir a la Tienda', 'store'); ?>">
                <?php include esc_url( get_template_directory() . '/img/icons/navbar/cart.svg' ); ?>
              </a>
            </div>
          </div>
        <?php } else { ?>
          <div class="col-auto">
            <div class="st-navbar-mobile-cart-icon">
              <a class="cart-icon-btn" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php esc_html_e('Ir al carrito', 'store'); ?>">
                <?php include esc_url( get_template_directory() . '/img/icons/navbar/cart.svg' ); ?>
              </a>
            </div>
          </div>
        <?php } ?>
      <?php } ?>

      <!-- Icon buscar -->
      <div class="col-auto">
        <div class="st-navbar-mobile-search-icon">
          <a class="search-icon-btn" data-toggle="collapse" href="#st-nb-mb-search-collapse" aria-expanded="false" aria-controls="st-nb-mb-search-collapse" title="<?php esc_html_e('Abrir Buscar', 'store'); ?>">
            <?php include esc_url( get_template_directory() . '/img/icons/navbar/search.svg' ); ?>
          </a>
        </div>
      </div>
      
      <!-- Icon bars -->
      <div class="col-auto">
        <div class="st-navbar-mobile-bars-icon">
          <a class="bars-icon-btn" data-toggle="collapse" href="#st-nb-mb-bars-collapse" aria-expanded="false" aria-controls="st-nb-mb-bars-collapse" title="<?php esc_html_e('Abrir Menú', 'store'); ?>">
            <div class="bars-icon-img">
              <div></div>
            </div>
          </a>
        </div>
      </div>
      
      <!-- Collapse buscar -->
      <div class="col-12">
        <div id="st-nb-mb-search-collapse" class="collapse st-navbar-mobile-search-collapse">
          <div class="st-collapse-wrap">
            <div class="st-collapse-contents">
              <form method="get" action="<?php echo home_url(); ?>">
                <div class="input-group">
                  <input type="text" class="form-control" data-provide="typeahead" value="" name="s" placeholder="<?php esc_html_e('Buscar ...', 'store'); ?>" aria-label="<?php esc_html_e('Buscar ...', 'store'); ?>">
                  <div class="input-group-append">
                    <button type="submit" class="btn btn-secondary"><i class="fas fa-search"></i></button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Collapse menu -->
      <div class="col-12">
        <div id="st-nb-mb-bars-collapse" class="collapse st-navbar-mobile-bars-collapse st-collapse-height-value">
          <div class="st-collapse-wrap">
            <div class="st-collapse-contents st-collapse-contents-height-value">
              <nav class="st-navbar-mobile-nav">
                <?php
                if ( has_nav_menu('woo-navbar') ) {
                  wp_nav_menu( array(
                    'theme_location' => 'woo-navbar',
                    'container'      => false,
                    'menu_class'     => 'st-navbar-mobile-menu',
                    'depth'          => 2
                  ));
                } else {
                  printf( '<p class="st-navbar-mobile-menu-error"><a href="%1$s">Asignar menu primario</a></p>', admin_url( 'nav-menus.php' ) );
                }
                ?>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Estos son los estilos de la navbar visible en móviles.

navbar-mobile.css


.st-navbar-mobile {
  position: fixed;
  background-color: rgba(101, 101, 101, 0.7);
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile.st-navbar-mobile-scroll {
  background-color: #656565;
}
.st-navbar-mobile .st-navbar-mobile-row {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Logo */
.st-navbar-mobile-logo-text {
  padding: 0;
  margin: 0;
}
.st-navbar-mobile-logo-text a {
  position: relative;
  display: block;
  width: 106px;
  height: 60px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 576px) {
  .st-navbar-mobile-logo-text a {
    width: 114px;
    height: 60px;
  }
}
.st-navbar-mobile-logo-text a svg {
  position: absolute;
  top: 17px;
  left: 0;
  width: 106px;
  height: 26px;
}
@media (min-width: 576px) {
  .st-navbar-mobile-logo-text a svg {
    top: 16px;
    left: 0;
    width: 114px;
    height: 28px;
  }
}
.st-navbar-mobile-logo-text a svg .cls-logo-grey {
  fill: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-logo-text a:hover svg .cls-logo-grey,
.st-navbar-mobile-logo-text a:focus svg .cls-logo-grey {
  fill: #5b87da;
}

/* User icon */
.st-navbar-mobile-user-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-user-icon a {
  position: relative;
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  width: 29px;
  height: 60px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 576px) {
  .st-navbar-mobile-user-icon a {
    width: 35px;
    height: 60px;
  }
}
.st-navbar-mobile-user-icon a svg {
  position: absolute;
  top: 23px;
  left: 8px;
  width: 13px;
  height: 14px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 576px) {
  .st-navbar-mobile-user-icon a svg {
    top: 22px;
    left: 10px;
    width: 15px;
    height: 16px;
  }
}
.st-navbar-mobile-user-icon a svg .cls-ico-user {
  fill: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-user-icon a:hover,
.st-navbar-mobile-user-icon a:focus {
  background-color: #555555;
}
.st-navbar-mobile-user-icon a:hover svg .cls-ico-user,
.st-navbar-mobile-user-icon a:focus svg .cls-ico-user {
  fill: #5b87da;
}
.st-navbar-mobile-scroll .st-navbar-mobile-user-icon a {
  background-color: #5c5c5c;
}

/* Cart icon */
.st-navbar-mobile-cart-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-cart-icon a {
  position: relative;
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  width: 33px;
  height: 60px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.st-navbar-mobile-cart-icon a:hover,
.st-navbar-mobile-cart-icon a:focus {
  background-color: #555555;
}
@media (min-width: 576px) {
  .st-navbar-mobile-cart-icon a {
    width: 39px;
    height: 60px;
  }
}
.st-navbar-mobile-cart-icon a svg {
  position: absolute;
  top: 23px;
  left: 8px;
  width: 17px;
  height: 14px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 576px) {
  .st-navbar-mobile-cart-icon a svg {
    top: 22px;
    left: 10px;
    width: 19px;
    height: 16px;
  }
}
.st-navbar-mobile-cart-icon a svg .cls-ico-cart {
  fill: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-cart-icon a:hover svg .cls-ico-cart,
.st-navbar-mobile-cart-icon a:focus svg .cls-ico-cart {
  fill: #5b87da;
}
.st-navbar-mobile-scroll .st-navbar-mobile-cart-icon a {
  background-color: #5c5c5c;
}

/* Search icon */
.st-navbar-mobile-search-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-search-icon a {
  position: relative;
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  width: 30px;
  height: 60px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.st-navbar-mobile-search-icon a:hover,
.st-navbar-mobile-search-icon a:focus {
  background-color: #555555;
}
@media (min-width: 576px) {
  .st-navbar-mobile-search-icon a {
    width: 36px;
    height: 60px;
  }
}
.st-navbar-mobile-search-icon a.active svg {
  -webkit-transform: rotate3d(0, 90, 0, 180deg);
  -moz-transform: rotate3d(0, 90, 0, 180deg);
  -ms-transform: rotate3d(0, 90, 0, 180deg);
  -o-transform: rotate3d(0, 90, 0, 180deg);
  transform: rotate3d(0, 90, 0, 180deg);
}
.st-navbar-mobile-search-icon a svg {
  position: absolute;
  top: 23px;
  left: 8px;
  width: 14px;
  height: 14px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 576px) {
  .st-navbar-mobile-search-icon a svg {
    top: 22px;
    left: 10px;
    width: 16px;
    height: 16px;
  }
}
.st-navbar-mobile-search-icon a svg .cls-ico-search {
  fill: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-search-icon a:hover svg .cls-ico-search,
.st-navbar-mobile-search-icon a:focus svg .cls-ico-search {
  fill: #5b87da;
}
.st-navbar-mobile-scroll .st-navbar-mobile-search-icon a {
  background-color: #5c5c5c;
}

/* Bars icon */
.st-navbar-mobile-bars-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn {
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0;
  width: 46px;
  height: 60px;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn:hover,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active {
  background-color: #555555;
}
@media (min-width: 576px) {
  .st-navbar-mobile-bars-icon a.bars-icon-btn {
    width: 52px;
    height: 60px;
  }
}
.st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img {
  position: absolute;
  top: 22px;
  left: 12px;
  margin: 0;
  width: 22px;
  height: 16px;
}
@media (min-width: 576px) {
  .st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img {
    top: 22px;
    left: 15px;
    width: 22px;
    height: 16px;
  }
}
.st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img:before,
.st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img:after,
.st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img div {
  content: '';
  display: block;
  background-color: #f5f5f5;
  height: 2px;
  margin: 0 0 5px;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn:hover .bars-icon-img:before,
.st-navbar-mobile-bars-icon a.bars-icon-btn:hover .bars-icon-img:after,
.st-navbar-mobile-bars-icon a.bars-icon-btn:hover .bars-icon-img div,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:before,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:after {
  background-color: #5b87da;
}
@media (min-width: 576px) {
  .st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img:before,
  .st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img:after,
  .st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img div {
    height: 2px;
  }
}
.st-navbar-mobile-bars-icon a.bars-icon-btn .bars-icon-img:after {
  margin: 0;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:before {
  transform: translateY(7px) rotate(135deg);
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:after {
  transform: translateY(-7px) rotate(-135deg);
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img div {
  transform: scale(0);
}
.st-navbar-mobile-scroll .st-navbar-mobile-bars-icon a.bars-icon-btn {
  background-color: #5c5c5c;
}

/* Collapse search */
.st-navbar-mobile-search-collapse {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1400;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap {
  position: relative;
  background-color: #555555;
  border-top: 1px solid #555555;
  border-radius: 0 0 6px 6px;
  padding: 15px 20px;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap .st-collapse-contents {
  position: relative;
  padding: 5px 0 7px;
  width: 100%;
  height: auto;
  border-radius: 0 0 6px 6px;
  -webkit-transition: height 0.1s linear;
  -moz-transition: height 0.1s linear;
  -ms-transition: height 0.1s linear;
  -o-transition: height 0.1s linear;
  transition: height 0.1s linear;
}

/* Collapse bars */
.st-navbar-mobile-bars-collapse {
  position: absolute;
  right: 0;
  z-index: 1400;
}
.st-navbar-mobile-bars-collapse .st-collapse-wrap {
  position: relative;
  background-color: #555555;
  border-top: 1px solid #555555;
  border-radius: 0 0 6px 6px;
  padding: 15px;
}
.st-navbar-mobile-bars-collapse .st-collapse-wrap .st-collapse-contents {
  position: relative;
  overflow: scroll;
  background-color: #555555;
  width: 258px;
  height: auto;
  border-radius: 0 0 6px 6px;
  -webkit-transition: height 0.1s linear;
  -moz-transition: height 0.1s linear;
  -ms-transition: height 0.1s linear;
  -o-transition: height 0.1s linear;
  transition: height 0.1s linear;
}

/* Nav */
.st-navbar-mobile-nav {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Menu */
.st-navbar-mobile-menu {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-navbar-mobile-menu li,
.st-navbar-mobile-menu > li {
  border-top: 1px solid #454545;
}
.st-navbar-mobile-menu > li > a {
  display: block;
  padding: 10px 15px 10px 0;
}
.st-navbar-mobile-menu > li:first-of-type {
  border-top: 0;
}
.st-navbar-mobile-menu > li:first-of-type > a {
  padding-top: 0;
}
.st-navbar-mobile-menu > li:last-of-type > a {
  padding-bottom: 0;
}
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-parent > a.st-navbar-mobile-submenu-toggle > i {
  float: right;
  margin-top: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a.st-navbar-mobile-submenu-toggle > i {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.st-navbar-mobile-menu li a {
  color: #f5f5f5;
}
.st-navbar-mobile-menu li a:hover,
.st-navbar-mobile-menu li a:focus {
  color: #5b87da;
}
.st-navbar-mobile-menu li.current_page_parent a,
.st-navbar-mobile-menu li.current-menu-parent a,
.st-navbar-mobile-menu li.current-menu-item a {
  color: #5b87da;
}
.st-navbar-mobile-menu li.current_page_parent a:hover,
.st-navbar-mobile-menu li.current-menu-parent a:hover,
.st-navbar-mobile-menu li.current-menu-item a:hover,
.st-navbar-mobile-menu li.current_page_parent a:focus,
.st-navbar-mobile-menu li.current-menu-parent a:focus,
.st-navbar-mobile-menu li.current-menu-item a:focus {
  color: #5b87da;
}

/* Menu dropdown */
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu {
  position: relative;
  display: none;
  width: 100%;
  margin: 0;
  padding: 4px 0 20px 15px;
  list-style: none;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li {
  border-top: 1px solid #454545;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li a {
  display: block;
  padding: 8px 0;
  font-size: 0.875rem;
  color: #f5f5f5;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li a:hover,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li a:focus {
  color: #5b87da;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li:first-of-type {
  border-top: 0;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li:first-of-type a {
  padding-top: 0;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li:last-of-type a {
  padding-bottom: 0;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li.current-menu-item a,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li.current-menu-item a:hover,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu li.current-menu-item a:focus {
  color: #5b87da;
}

Este script en jQuery añade propiedades y comportamientos a nuestra navbar visible en móviles.

navbar-mobile.js


(function($) {
  $(document).ready(function() {    

    /* Navbar mobile crea y borra clase con scroll */
    function navbarMobilePositionScroll() {
      if ($('div').hasClass('st-navbar-mobile')) {
        if ($(this).scrollTop() >= 1) {
          $('.st-navbar-mobile').addClass('st-navbar-mobile-scroll');
        }
        else {
          $('.st-navbar-mobile').removeClass('st-navbar-mobile-scroll');
        }
      }
    }
    navbarMobilePositionScroll();
    $(window).scroll(function() { navbarMobilePositionScroll(); });
    
    /* Navbar mobile iconos buscar y bars comportamientos */  
    $('.search-icon-btn').click(function() {
      if($('.search-icon-btn').hasClass('active')){
        $(this).removeClass('active');
      }
      else{
        $(this).addClass('active');
      }
    });
    $('.bars-icon-btn').click(function() {
      if($('.bars-icon-btn').hasClass('active')){
        $(this).removeClass('active');
      }
      else{
        $(this).addClass('active');
      }
    });
    
    /* Navbar mobile menu dropdown */
    $('.st-navbar-mobile-nav ul.sub-menu').each(function() {
      $(this).addClass('st-navbar-mobile-dropdown-menu');
    });
    $('.st-navbar-mobile-nav .st-navbar-mobile-menu > li > ul.sub-menu').each(function() {
      var parentWithUl = $(this).parent('li');
      parentWithUl.addClass('st-navbar-mobile-submenu-parent');
      parentWithUl.children('a').addClass('st-navbar-mobile-submenu-toggle');
      parentWithUl.children('a').append('');
      parentWithUl.children('.st-navbar-mobile-submenu-toggle').click(function(e) {
        e.preventDefault();
        var $this = $(this).parent('.st-navbar-mobile-submenu-parent');
        $this.siblings('li.st-navbar-mobile-submenu-open').removeClass('st-navbar-mobile-submenu-open').children('.sub-menu').slideUp(230);
        $('.st-navbar-mobile-menu > li > ul.sub-menu li.st-navbar-mobile-submenu-open').removeClass('st-navbar-mobile-submenu-open').children('.sub-menu').slideUp(230);
        $this.toggleClass('st-navbar-mobile-submenu-open');
        if ($this.hasClass('st-navbar-mobile-submenu-open')) {
          $this.children('.sub-menu').slideDown(230);
        } else {
          $this.children('.sub-menu').slideUp(230);
        }
        return false;
      });
    });
    
    /* Navbar mobile collapse menu reajusta medidas */
    function funCollapseHeight() {
      var windowHeight = $(window).height();
      var collapseHeight = $('.st-collapse-height-value').outerHeight( true );
      var collapseHeightMore = collapseHeight+90;
      var windowHeightMenos = windowHeight-120;
      if( windowHeight >= collapseHeightMore ) {
        $('.st-collapse-contents-height-value').removeAttr('style');
      } else {
        $('.st-collapse-contents-height-value').css({'height':windowHeightMenos+'px'});
      }
    }
    funCollapseHeight();
    $(window).resize(function() { funCollapseHeight(); });
    $(window).scroll(function() { funCollapseHeight(); });

    /* Navbar mobile cierra todos los collapse */
    $('.wrap').on('click', function() {
      $('#st-nb-mb-search-collapse').collapse('hide');
      $('#st-nb-mb-bars-collapse').collapse('hide');
      $('.search-icon-btn').removeClass('active');
      $('.bars-icon-btn').removeClass('active');
    });
    $('.search-icon-btn').on('click', function() {
      $('#st-nb-mb-bars-collapse').collapse('hide');
      $('.bars-icon-btn').removeClass('active');
    });
    $('.bars-icon-btn').on('click', function() {
      $('#st-nb-mb-search-collapse').collapse('hide');
      $('.search-icon-btn').removeClass('active');
    });
  });
})(jQuery);

Este topmenu, se posiciona encima de la navbar de ordenadores, y cuando bajamos scroll el topmenu, con posición absoluta, deja de verse y la navbar de ordenadores ocupa su lugar.

Esta barra nos permite insertar contenidos propios de WooCommerce, para ayudas a la navegación, podrás añadir iconos para accesos directos. A la izquierda puedes ver el icono de teléfono para realizar una llamada y en la parte derecha un icono de búsqueda, abre un campo para buscar.

Veamos el markup de la navbar topmenu para ordenadores.

navbar-topmenu.php


<div class="st-navbar-tm-desktop st-navbar-tm-desktop-style d-none d-md-block">
  <div class="container-fluid">
    <div class="row no-gutters align-items-center justify-content-between st-row-height">

      <!-- Col left -->
      <div class="col-auto st-nb-tm-col-left">
        <ul class="st-nb-tm-left-ul">
          <li>
            <a href="tel:+34666333999" title="<?php esc_html_e('Llamar', 'store'); ?>">
              <i class="fas fa-phone"></i> <span>(+34) 666 333 999</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Col right -->
      <div class="col-auto st-nb-tm-col-right">
        <ul class="st-nb-tm-right-ul">
        
          <!-- WooCommerce iconos usuario y carrito -->
          <?php if ( class_exists( 'woocommerce' ) ) {
            global $woocommerce;
            if (is_user_logged_in()) {
              $current_user = wp_get_current_user(); ?>
              <li class="nav-item nav-item-user">
                <a class="nav-link" href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" title="<?php esc_html_e('Ir a Mi Cuenta', 'store'); ?>">
                  <?php include esc_url( get_template_directory() . '/img/icons/navbar/user.svg' ); ?>
                  <span class="span-wrap"><?php echo $current_user->first_name; ?></span>
                </a>
              </li>
            <?php } else { ?>
              <li class="nav-item nav-item-user">
                <a class="nav-link" href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" title="<?php esc_html_e('Acceder a Mi Cuenta', 'store'); ?>">
                  <?php include esc_url( get_template_directory() . '/img/icons/navbar/user.svg' ); ?>
                </a>
              </li>
            <?php } ?>
            <?php if (WC()->cart->get_cart_contents_count() == 0 ) { ?>
              <li class="nav-item nav-item-cart">
                <a class="nav-link nav-link-cart" href="<?php echo esc_url(apply_filters('woocommerce_return_to_shop_redirect', wc_get_page_permalink('shop'))); ?>" title="<?php esc_html_e('Ir a la Tienda', 'store'); ?>"><?php include esc_url(get_template_directory().'/img/icons/navbar/cart.svg'); ?></a>
              </li>
            <?php } else { ?>
              <li class="nav-item nav-item-cart">
                <a class="nav-link nav-link-cart" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php esc_html_e('Ir al carrito', 'store'); ?>"><?php include esc_url(get_template_directory().'/img/icons/navbar/cart.svg' ); ?><span class="span-wrap"><?php echo WC()->cart->get_cart_contents_count(); ?> - <?php echo WC()->cart->get_cart_total(); ?></span></a>
              </li>
            <?php } ?>
          <?php } ?>
          
          <!-- Item buscar completo -->
          <li class="dropdown nav-item nav-item-search">

            <!-- Icon buscar -->
            <a class="nav-link" title="<?php esc_html_e('Abrir buacar', 'store'); ?>" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <?php include esc_url( get_template_directory() . '/img/icons/navbar/search.svg' ); ?>
            </a>
            
            <!-- Dropdown buscar -->
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <form method="get" action="<?php echo home_url(); ?>">
                <div class="input-group">
                  <input type="text" class="form-control" data-provide="typeahead" value="" name="s" placeholder="<?php esc_html_e('Buscar en la página Web ...', 'store'); ?>" aria-label="<?php esc_html_e('Buscar en la página Web ...', 'store'); ?>">
                  <div class="input-group-append">
                    <button type="submit" class="btn btn-primary"><?php esc_html_e('Buscar', 'store'); ?></button>
                  </div>
                </div>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Veamos los estilos de la navbar topmenu visible en ordenadores.

navbar-topmenu.css


.st-navbar-tm-desktop {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 44px;
  font-size: 14px;
  background-color: rgba(101, 101, 101, 0.85);
  border-bottom: 1px solid #555555;
  z-index: 1450;
}
.st-navbar-tm-desktop .st-row-height {
  height: 44px;
}

/* Topmenu col-left */
.st-navbar-tm-desktop .st-nb-tm-col-left .st-nb-tm-left-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-navbar-tm-desktop .st-nb-tm-col-left .st-nb-tm-left-ul li {
  float: left;
}
.st-navbar-tm-desktop .st-nb-tm-col-left .st-nb-tm-left-ul li > a {
  color: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-left .st-nb-tm-left-ul li > a:hover,
.st-navbar-tm-desktop .st-nb-tm-col-left .st-nb-tm-left-ul li > a:focus {
  color: #5b87da;
}

/* Topmenu col-right */
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li {
  float: left;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search > a > svg {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.show > a > svg {
  -webkit-transform: rotate3d(0, 90, 0, 180deg);
  -moz-transform: rotate3d(0, 90, 0, 180deg);
  -ms-transform: rotate3d(0, 90, 0, 180deg);
  -o-transform: rotate3d(0, 90, 0, 180deg);
  transform: rotate3d(0, 90, 0, 180deg);
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.dropdown .dropdown-menu {
  background-color: #656565;
  margin: 1px 0 0 0;
  padding: 0;
  border-top: 1px solid #555555;
  border-right: 1px solid #555555;
  border-bottom: 1px solid #555555;
  border-left: 1px solid #555555;
  border-radius: 0 0 6px 6px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.dropdown .dropdown-menu .input-group {
  width: 500px;
  margin: 20px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.dropdown .dropdown-menu .input-group input.form-control::placeholder {
  color: #a5a5a5;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-user a svg {
  width: 11px;
  height: 12px;
  margin-top: -2px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-user a svg .cls-ico-user {
  -webkit-transition: fill 0.3s ease-in-out;
  -moz-transition: fill 0.3s ease-in-out;
  -ms-transition: fill 0.3s ease-in-out;
  -o-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-user a span.span-wrap {
  margin-left: 2px;
  color: #f5f5f5;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-user a:hover .cls-ico-user {
  fill: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-user a:hover span.span-wrap {
  color: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-cart a svg {
  width: 14px;
  height: 12px;
  margin-top: -2px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-cart a svg .cls-ico-cart {
  -webkit-transition: fill 0.3s ease-in-out;
  -moz-transition: fill 0.3s ease-in-out;
  -ms-transition: fill 0.3s ease-in-out;
  -o-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-cart a span.span-wrap {
  margin-left: 5px;
  color: #f5f5f5;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-cart a:hover .cls-ico-cart {
  fill: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-cart a:hover span.span-wrap {
  color: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search a {
  padding-right: 0;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search a svg {
  width: 12px;
  height: 12px;
  margin-top: -2px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search a svg .cls-ico-search {
  -webkit-transition: fill 0.3s ease-in-out;
  -moz-transition: fill 0.3s ease-in-out;
  -ms-transition: fill 0.3s ease-in-out;
  -o-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search a:hover .cls-ico-search {
  fill: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.show a .cls-ico-search {
  fill: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.nav-item-search.show a:hover .cls-ico-search {
  fill: #5b87da;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li + li {
  border-left: 1px solid #555555;
}

Esta navbar para ordenadores solo es visible en patallas de un ancho superior a 768 pixeles, está dotado de un segundo nivel de navegación por medio de dropdowns de estilo Bootstrap 4 y los cuales podremos alinear sus contenidos a la izquierda o la derecha con solo uñadir una clase CSS.

Esta navbar se posiciona siempre arriba de la página, así siempre esta visible, incluso al hacer scroll y solo al principio de la página deja un espacio para que se coloque encima el topmenu, suavizamos sus cambios de posicion con animaciones CSS.

Veamos el markup de la navbar para ordenadores.

navbar-desktop.php


<div class="st-navbar-desktop topmenu st-navbar-desktop-style d-none d-md-block">
  <div class="container-fluid">
    <div class="row no-gutters align-items-center justify-content-between st-navbar-desktop-row">
        
      <!-- Logo -->
      <div class="col">
        <div class="st-navbar-desktop-logo-text">
          <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo get_bloginfo('description'); ?>">
            <?php include esc_url( get_template_directory() . '/img/logo/smoothemes-logo.svg' ); ?>
          </a>
        </div>
      </div>
      
      <!-- Menu -->
      <div class="col-auto">
        <nav class="st-navbar-desktop-nav">
          <?php
          if ( has_nav_menu('woo-navbar') ) {
            wp_nav_menu( array(
              'theme_location' => 'woo-navbar',
              'container'      => false,
              'menu_class'     => 'st-navbar-desktop-menu',
              'fallback_cb'    => 'WP_Bootstrap_Navwalker::fallback',
              'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
              'depth'          => 2,
              'walker'         => new WP_Bootstrap_Navwalker(),
            ));
          } else {
            printf( '<p class="st-navbar-desktop-menu-error"><a href="%1$s">Asignar menu primario</a></p>', admin_url( 'nav-menus.php' ) );
          }
          ?>
        </nav>
      </div>
    </div>
  </div>
</div>

Veamos los estilos de la navbar visible en ordenadores.

navbar-desktop.css


.st-navbar-desktop.topmenu {
  position: absolute;
  top: 44px;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background-color: rgba(101, 101, 101, 0.75);
  border-bottom: 1px solid #555555;
  z-index: 1400;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -ms-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.st-navbar-desktop.topmenu.st-navbar-desktop-scroll {
  position: fixed;
  top: 0;
  background-color: #656565;
  border-bottom: 1px solid #555555;
}
.st-navbar-desktop.topmenu .st-navbar-desktop-row {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Logo */
.st-navbar-desktop-logo-text {
  margin: 0;
  padding: 0;
}
.st-navbar-desktop-logo-text a {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.st-navbar-desktop-logo-text a svg {
  width: 138px;
  height: 34px;
  vertical-align: middle;
  overflow: visible;
}
.st-navbar-desktop-logo-text a svg .cls-logo-grey {
  fill: #f5f5f5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.st-navbar-desktop-logo-text a:hover svg .cls-logo-grey,
.st-navbar-desktop-logo-text a:focus svg .cls-logo-grey {
  fill: #5b87da;
}

/* Nav */
.st-navbar-desktop-nav .st-navbar-desktop-menu-error {
  margin: 0 15px 0 0;
  padding: 0;
}

/* Nav menu */
.st-navbar-desktop-nav .st-navbar-desktop-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu > li {
  float: left;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu > li > a {
  margin: 0;
  padding: 18px 10px 18px 10px;
  color: #f5f5f5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li:last-child > a {
  padding-right: 0;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu > li > a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li > a:focus,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current_page_parent > a,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-parent > a,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-item > a,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current_page_parent > a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-parent > a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-item > a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current_page_parent > a:focus,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-parent > a:focus,
.st-navbar-desktop-nav .st-navbar-desktop-menu > li.current-menu-item > a:focus {
  color: #5b87da;
}

/* Nav menu dropdown */
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown > a.dropdown-toggle::after {
  margin-top: 0;
  margin-left: 3px;
  vertical-align: .21em;
  -webkit-transition: all 0.12s linear;
  -moz-transition: all 0.12s linear;
  -ms-transition: all 0.12s linear;
  -o-transition: all 0.12s linear;
  transition: all 0.12s linear;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown.show > a.dropdown-toggle::after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu {
  min-width: 160px;
  margin: 0 0 0 -1px;
  padding: 0;
  font-size: inherit;
  background-color: #656565;
  border-top: 1px solid #555555;
  border-right: 1px solid #555555;
  border-bottom: 1px solid #555555;
  border-left: 1px solid #555555;
  box-shadow: none;
  border-radius: 0 0 6px 6px;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li a {
  margin: 0;
  padding: 15px 10px 15px 10px;
  font-size: 0.875rem;
  color: #f5f5f5;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li a:focus {
  color: #5b87da;
  background-color: #6a6a6a;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu-right {
  margin: 0 -1px 0 0;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu-right > li a {
  text-align: right;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a,
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a:hover,
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a:focus {
  color: #5b87da;
  background-color: #6a6a6a;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu li.dropdown .dropdown-menu li + li {
  border-top: 1px solid #555555;
}

Este script en jQuery añade propiedades y comportamientos a nuestra navbar visible en ordenadores.

navbar-desktop.js


(function($) {
  $(document).ready(function() {
    
    /* Navbar desktop add class scroll */
    function navbarDesktopPositionScroll() {
      if ($('div').hasClass('st-navbar-desktop')) {
        if ($(this).scrollTop() >= 44) {
          $('.st-navbar-desktop').addClass('st-navbar-desktop-scroll');
        }
        else {
          $('.st-navbar-desktop').removeClass('st-navbar-desktop-scroll');
        }
      }
    }
    navbarDesktopPositionScroll();
    $(window).scroll(function() { navbarDesktopPositionScroll(); });
    
    /* Navbar desktop add class dropdown-menu alinear derecha */
    if ($('li').hasClass('dropdown-right')) { 
      $('.st-navbar-desktop-nav ul.st-navbar-desktop-menu > li.dropdown-right').each(function() {
        $(this).children('.dropdown-menu').addClass('dropdown-menu-right');
      });
    }
  });
})(jQuery);
NOTA

Dentro de un dropdown, si queremos que los elementos se vean alineados a la derecha. Tenemos que añadir la clase CSS: «dropdown-right» al elemento dropdown raiz de menú dentro de la herramienta de WordPress admin, para crear menús. Previamente tienes que activar la funcionalidad de «Clases CSS», en «Mostrar propiedades avanzadas de menú», dentro de «Opciones de pantalla».

Solo nos queda instalar la navbar en un template de WordPress, entonces solo tenemos que añadir este código con la ruta real a los archivos.

template-navbar.php


<header class="st-header">
  <?php get_template_part( '/inc/navbar', 'mobile' ); ?>
  <?php get_template_part( '/inc/navbar', 'topmenu' ); ?>
  <?php get_template_part( '/inc/navbar', 'desktop' ); ?>
</header>
Demo snippet
Descargar snippet

Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *