WordPress Bootstrap 4 navbar

WordPress Bootstrap 4 navbar

Insertamos la navbar de Bootstrap 4 dentro de un tema de WordPress. Añadimos submenus dropdowns, con control de alineación de sus contenidos, consiguiendo un segundo nivel de navegación y un comportamiento responsive.

Lo más importante de una página Web, es la navbar o barra de navegación. Opino que siempre esté visible, que informe y oriente la mejor forma de navegación, dentro del sitio Web al usuario visitante.

Cuando diseñamos una navbar, debemos tener en cuenta muchas cosas, el código, estilos, posición, navegación, la información que muestra, que sea intuitiva y que al final se comporte como queremos. AH!! que también sea responsive.

Este nuevo snippet, explica como crear una navbar con Bootstrap 4 para WordPress. Cargaremos diferentes navbar según dispositivos o pantallas, siempre se verá bien. Con dropdowns disponemos de un segundo nivel de navagación. El logo en SVG nos permite diferentes comportamientos a los eventos de cursor. La apertura de menú en dispositivos es lateral y animada.

Requerimientos de sistema

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

Empezamos cargando los archivos necesarios en el archivo functions.php

functions.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('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.js', array('jquery'), '1.14.3', true);
  wp_enqueue_script('bootstrap-js', get_template_directory_uri() .'/js/bootstrap.js', array('jquery'), '4.1.3', true);
  wp_enqueue_script('svg-injector-js', get_template_directory_uri() .'/js/svg-injector.js', array('jquery'), false, 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 menu wp-navbar
register_nav_menus(array(
  'wp-navbar' => __('WP Navbar menu', 'demos'),
));

// Requiere nav-walker
require get_template_directory().'/inc/class-wp-bootstrap-navwalker.php';

// Registrar sidebar solo para navbar mobile
if (function_exists('register_sidebar')) {
  get_template_part('/inc/sidebar-footer', 'mobile');
}

El script «svg-injector.js», nos inyecta el código del gráfico SVG y así poder dar diferentes propiedades de estilo a sus eventos de cursor.

svg-injector.js


var $s = jQuery.noConflict();
$s(function() {
  $s('img.img-svg').each(function(){
    var $img = $s(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');
    
    $s.get(imgURL, function(data) {
      var $svg = $s(data).find('svg');
      if(typeof imgID !== 'undefined') {
        $svg = $svg.attr('id', imgID);
      }
      if(typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass+' replaced-svg');
      }
      $svg = $svg.removeAttr('xmlns:a');
      $img.replaceWith($svg);
    }, 'xml');
  });
});

Registramos un nuevo menú con la función register_nav_menus() y respetaremos el id de registro «wp-navbar».

Incluimos la clase wp-bootstrap-navwalker, solo necesaria para la navbar de ordenadores, la cual hace dinámico nuestro menú Bootstrap 4 en WordPress.Es posible que tengas que cambiar algún “text domain”, dentro del archivo de la clase.

Los restantes archivos de estilos, scripts y de como instalarla, lo explicamos a continuación.

La navbar para móviles solo es visible en pantallas con un ancho máximo de 768 pixeles. El menú es de apertura lateral animada y creamos un sidebar en el footer para poder añadir widgets.

Vemos 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 st-row">
      <div class="col-auto">
      
        <!-- Bars icon svg -->
        <div class="st-navbar-mobile-bars">
          <a id="btn-bars" title="<?php echo get_bloginfo('description'); ?>">
           <img class="img-svg" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/icons/bars.svg" alt="Bars icon">
          </a>
        </div>
      </div>
      <div class="col">
        
        <!-- Logo svg -->
        <div class="st-navbar-mobile-logo-text">
          <a href="<?php echo home_url( '/' ); ?>" title="<?php echo get_bloginfo('description'); ?>">
           <img class="img-svg" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/logo/smoothemes-logo.svg" alt="Smoothemes logo">
          </a>
        </div>
      </div>
    </div>
    
    <!-- Navbar -->
    <nav id="st-navbar-mobile-nav" class="st-navbar-mobile-nav">
      <?php
      if ( has_nav_menu('wp-navbar') ) {
        wp_nav_menu( array(
          'theme_location' => 'wp-navbar',
          'container'      => false,
          'menu_class'     => 'st-navbar-mobile-menu',
          'depth'          => 2
        ));
      } else {
        printf( '<a href="%1$s">Asignar menú wp-navbar</a>', admin_url( 'nav-menus.php' ) );
      }
      ?>
      
      <!-- Sidebar -->
      <div class="st-navbar-mobile-nav-footer">
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Navbar mobile footer') ); ?>
      </div>
    </nav>
  </div>
</div>

Veamos los estilos de la navbar visible en móviles.

navbar-mobile.css


.st-navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 74px;
  padding: 0;
  z-index: 1500;
}
.st-navbar-mobile .st-row {
  height: 74px;
}

/* Bars icon */
.st-navbar-mobile-bars {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-bars a {
  display: inline-block;
  cursor: pointer;
}
.st-navbar-mobile-bars a,
.st-navbar-mobile-bars a svg {
  width: 22px;
  height: 22px;
}
@media (min-width: 576px) {
  .st-navbar-mobile-bars a,
  .st-navbar-mobile-bars a svg {
    width: 24px;
    height: 24px;
  }
}
.st-navbar-mobile-bars a {
  margin: 26px 15px 26px 0;
}
@media (min-width: 576px) {
  .st-navbar-mobile-bars a {
    margin: 25px 15px 25px 0;
  }
}
.st-navbar-mobile-bars a svg,
.st-navbar-mobile-bars a svg .cls-bar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.st-navbar-mobile-bars a svg:hover .cls-bar {
  fill: #197bce;
}
.st-navbar-mobile-bars a svg:focus .cls-bar,
.st-navbar-mobile-bars a.active svg .cls-bar {
  fill: #197bce;
}
.st-navbar-mobile-bars a.active svg {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* Logo */
.st-navbar-mobile-logo-text {
  float: left;
  padding: 0;
  margin: 0 0 0 15px;
}
@media (min-width: 576px) {
  .st-navbar-mobile-logo-text {
    margin: 0 0 0 15px;
  }
}
.st-navbar-mobile-logo-text a {
  display: block;
  cursor: pointer;
}
.st-navbar-mobile-logo-text a,
.st-navbar-mobile-logo-text a svg {
  width: 138px;
  height: 34px;
}
@media (min-width: 576px) {
  .st-navbar-mobile-logo-text a,
  .st-navbar-mobile-logo-text a svg {
    width: 146px;
    height: 36px;
  }
}
.st-navbar-mobile-logo-text a svg .cls-st {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.st-navbar-mobile-logo-text a:hover svg .cls-st {
  fill: #197bce;
}
.st-navbar-mobile-logo-text a:focus svg .cls-st {
  fill: #197bce;
}

/* Sidebar navbar */
.st-navbar-mobile-nav {
  position: fixed;
  top: 0;
  left: -70%;
  width: 70%;
  height: 100%;
  margin-top: 74px;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
  padding-top: 0;
  padding-right: 15px;
  padding-bottom: 0;
  padding-left: 15px;
  color: #474747;
  background-color: #f2f2f2;
  border-right: 1px solid #e2e2e2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1100;
}
@media (min-width: 576px) {
  .st-navbar-mobile-nav {
    padding-right: 30px;
    padding-left: 30px;
    left: -55%;
    width: 55%;    
  }
}
@media (min-width: 768px) {
  .st-navbar-mobile-nav {
    left: -30%;
    width: 30%;
  }
}
.st-navbar-mobile-nav.st-navbar-mobile-nav-open {
  left: 0;
}

/* Sidebar navbar nav */
.st-navbar-mobile-menu {
  font-family: "Montserrat", sans-serif;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.st-navbar-mobile-menu li {
  border-top: 1px solid #e2e2e2;
}
.st-navbar-mobile-menu li:first-of-type {
  border-top: 0;
}
.st-navbar-mobile-menu > li > a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0;
  color: #474747;
}
.st-navbar-mobile-menu > li > a > i {
  color: #474747;
}
.st-navbar-mobile-menu > li > a:hover,
.st-navbar-mobile-menu > li > a:hover > i,
.st-navbar-mobile-menu > li.current-menu-ancestor > a:hover,
.st-navbar-mobile-menu > li.current-menu-ancestor > a:hover > i,
.st-navbar-mobile-menu > li.current_page_parent > a:hover,
.st-navbar-mobile-menu > li.current_page_parent > a:hover > i,
.st-navbar-mobile-menu > li.current_page_item > a:hover,
.st-navbar-mobile-menu > li.current_page_item > a:hover > i,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a:hover,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a:hover > i {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-mobile-menu > li > a:focus,
.st-navbar-mobile-menu > li > a:focus > i,
.st-navbar-mobile-menu > li.current-menu-ancestor > a,
.st-navbar-mobile-menu > li.current-menu-ancestor > a > i,
.st-navbar-mobile-menu > li.current-menu-ancestor > a:focus,
.st-navbar-mobile-menu > li.current-menu-ancestor > a:focus > i,
.st-navbar-mobile-menu > li.current_page_parent > a,
.st-navbar-mobile-menu > li.current_page_parent > a > i,
.st-navbar-mobile-menu > li.current_page_parent > a:focus,
.st-navbar-mobile-menu > li.current_page_parent > a:focus > i,
.st-navbar-mobile-menu > li.current_page_item > a,
.st-navbar-mobile-menu > li.current_page_item > a > i,
.st-navbar-mobile-menu > li.current_page_item > a:focus,
.st-navbar-mobile-menu > li.current_page_item > a:focus > i,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a > i,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a:focus,
.st-navbar-mobile-menu > li.st-navbar-mobile-submenu-open > a:focus > i {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-mobile-menu > li > a.st-navbar-mobile-submenu-toggle > i {
  float: right;
  display: block;
  padding-right: 0;
  padding-left: 0;
}
.st-navbar-mobile-menu li.st-navbar-mobile-submenu-parent > a.st-navbar-mobile-submenu-toggle > i {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.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);
}

/* Sidebar navbar nav dropdown */
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu {
  position: static;
  float: none;
  display: none;
  list-style: none;
  width: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  z-index: 1100;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  padding: 10px 15px;
  color: #474747;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a:hover,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li.current_page_item > a:hover {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a:focus,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li.current_page_item > a {
  color: #197bce;
  background-color: transparent;
}

/* Sidebar navbar footer */
.st-navbar-mobile-nav-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 85px;
  display: block;
  padding: 0 30px;
  padding-top: 0;
  padding-right: 15px;
  padding-bottom: 0;
  padding-left: 15px;
  text-align: center;
}
@media (min-width: 576px) {
  .st-navbar-mobile-nav-footer {
    padding-right: 30px;
    padding-left: 30px;
  }
}
.st-navbar-mobile-nav-footer .widget {
  display: inline-block;
}
.st-navbar-mobile-nav-footer a i {
  color: #474747;
}
.st-navbar-mobile-nav-footer a:hover i {
  color: #197bce;
}
.st-navbar-mobile-nav-footer a:focus i {
  color: #197bce;
}

/* Navbar mobile style */
.st-navbar-mobile-style {
  background-color: transparent;
  border-bottom: 1px solid #b8daff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.st-navbar-mobile-style .st-navbar-mobile-bars {
  border-right: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.st-navbar-mobile-style.st-navbar-mobile-scroll {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e2e2e2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.st-navbar-mobile-style.st-navbar-mobile-scroll .st-navbar-mobile-bars {
  border-right: 1px solid #e2e2e2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}

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

navbar-mobile.js


(function($) {
$(document).ready(function() {
  
  /* Scroll add class */
  if ($('div').hasClass('st-navbar-mobile')) {
    $(window).scroll(function() {
      if ($(this).scrollTop() >= 1) {
        $('.st-navbar-mobile').addClass('st-navbar-mobile-scroll');
      }
      else {
        $('.st-navbar-mobile').removeClass('st-navbar-mobile-scroll');
      }
    });
  }
  
  /* Bars icon */
  $('#btn-bars').click(function() {
    $('#btn-bars').toggleClass('active');
    $('#st-navbar-mobile-nav').toggleClass('st-navbar-mobile-nav-open');
  });
 
  /* Navbar close */
  $('.wrap').click(function() {
    if ($('#btn-bars.active').length > 0) {
      $('#btn-bars').removeClass('active');
    }
    if ($('#st-navbar-mobile-nav.st-navbar-mobile-nav-open').length > 0) {
      $('#st-navbar-mobile-nav').removeClass('st-navbar-mobile-nav-open');
    }
  });
  
  /* Menu and 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('<i class="fas fa-caret-down"></i>');
    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;
    });
  });
  
  /* Dropdown close */
  $('.wrap').click(function() {
    $('.st-navbar-mobile-menu li.st-navbar-mobile-submenu-parent ul.sub-menu').slideUp(230);
    $('.st-navbar-mobile-menu li.st-navbar-mobile-submenu-parent ul.sub-menu').css({'display': 'none'});
    $('.st-navbar-mobile-menu li.st-navbar-mobile-submenu-parent').removeClass('st-navbar-mobile-submenu-open');
  });   
 
});
})(jQuery);

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.

Vemos el markup de la navbar para ordenadores.

navbar-desktop.php


<div class="navbar navbar-expand-md st-navbar-desktop st-navbar-desktop-style d-none d-md-block">
  <div class="container-fluid">
    
    <!-- Logo svg -->
    <div class="justify-content-start">
      <div class="st-navbar-desktop-logo-text">
        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo get_bloginfo('description'); ?>">
         <img class="img-svg" src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/logo/smoothemes-logo.svg" alt="Smoothemes logo">
        </a>
      </div>
    </div>
    
    <!-- Navbar -->
    <nav class="st-navbar-desktop-nav justify-content-end">
      <?php
      if ( has_nav_menu('wp-navbar') ) {
        wp_nav_menu( array(
          'theme_location' => 'wp-navbar',
          'container'      => false,
          'menu_class'     => 'navbar-nav',
          '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( '<a href="%1$s">Asignar menú wp-navbar</a>', admin_url( 'nav-menus.php' ) );
      }
      ?>
    </nav>
  </div>
</div>

Veamos los estilos de la navbar visible en ordenadores.

navbar-desktop.css


.st-navbar-desktop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1500;
}

/* Logo */
.st-navbar-desktop-logo-text {
  display: block;
  float: left;
  padding: 0;
  margin: 0;
}
.st-navbar-desktop-logo-text > a { 
  display: block;
  cursor: pointer;
  width: 154px;
  height: 38px;
}
.st-navbar-desktop-logo-text > a > svg { 
  width: 154px;
  height: 38px;
}
.st-navbar-desktop-logo-text .cls-st { 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Nav */
.st-navbar-desktop-nav {
  float: right;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.st-navbar-desktop-nav .st-navbar-desktop-menu-error { 
  margin: 2rem 0;
  float: right;
}

/* Navbar nav menu dropdown */
.st-navbar-desktop-nav .navbar-nav li.dropdown > a.dropdown-toggle::after {
  margin-top: 0;
  margin-left: 5px;
}
.st-navbar-desktop-nav .navbar-nav 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 .navbar-nav li.dropdown .dropdown-menu {
  min-width: 180px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  box-shadow: none;
  border-radius: 0;
}
.st-navbar-desktop-nav .navbar-nav li.dropdown .dropdown-menu li > a {
  margin: 0;
  padding: 15px;
}
.st-navbar-desktop-nav .navbar-nav li.dropdown .dropdown-menu-right li > a {
  text-align: right;
}

/* Estilo */
.st-navbar-desktop-style {
  background-color: transparent;
  border-bottom: 1px solid #b8daff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item .nav-link {
  padding: 30px 15px;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item:last-child .nav-link {
  padding: 30px 0 30px 15px;
}
.st-navbar-desktop-style.st-navbar-desktop-scroll {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e2e2e2;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item .nav-link {
  padding: 30px 15px;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item:last-child .nav-link {
  padding: 30px 0 30px 15px;
}
.st-navbar-desktop-style .st-navbar-desktop-logo-text a:hover svg .cls-st { 
  fill: #197bce;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .st-navbar-desktop-menu-error a {
  color: #474747;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .st-navbar-desktop-menu-error a:hover {
  color: #197bce;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .st-navbar-desktop-menu-error a:focus {
  color: #197bce;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-link {
  color: #474747;
  background-color: transparent;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-link:hover,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item.dropdown .nav-link:hover,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current-menu-ancestor .nav-link:hover,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_parent .nav-link:hover,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_item .nav-link:hover {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-link:focus,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current-menu-ancestor .nav-link,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current-menu-ancestor .nav-link:focus,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_parent .nav-link,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_parent .nav-link:focus,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_item .nav-link,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav li.current_page_item .nav-link:focus {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .nav-item.dropdown.show .nav-link {
  color: #197bce;
  background-color: transparent;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu {
  background-color: #f2f2f2;
  border: 0px solid #e2e2e2;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li a.dropdown-item {
  color: #474747;
  background-color: transparent;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li a.dropdown-item:hover,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li.current_page_item a.dropdown-item:hover {
  color: #197bce;
  background-color: #e8e8e8;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li a.dropdown-item:focus,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li.current_page_item a.dropdown-item,
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li.current_page_item a.dropdown-item:focus {
  color: #197bce;
  background-color: #e8e8e8;
}
.st-navbar-desktop-style .st-navbar-desktop-nav .navbar-nav .dropdown-menu li + li {
  border-top: 1px solid #e2e2e2;
}

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

navbar-desktop.js


(function($) {
$(document).ready(function() {
    
  /* Scroll add class */
  if ($('div').hasClass('st-navbar-desktop')) {
    $(window).scroll(function() {
      if ($(this).scrollTop() >= 1) {
        $('.st-navbar-desktop').addClass('st-navbar-desktop-scroll');
      }
      else {
        $('.st-navbar-desktop').removeClass('st-navbar-desktop-scroll');
      }
    });
  }
  
  /* dropdown-menu add class align right */
  if ($('li').hasClass('dropdown-right')) { 
    $('.st-navbar-desktop-nav ul.navbar-nav > 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="header">
  <?php get_template_part( '/inc/navbar', 'mobile' ); ?>
  <?php get_template_part( '/inc/navbar', 'desktop' ); ?>
</header>

Descargate este snippet, pulsa el botón.

Compartir