WordPress Bootstrap 4 navbar

Actualizado

WordPress Bootstrap 4 navbar

WordPress Demo Descargar

05-12-18 WordPress navbar Demo Descargar

Actualizado el: 28-11-2019

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 por toggle collapse de Bootstrap 4 y animada.

Añadimos a nuestra navbar un formulario de búsqueda, adaptando sus estilos para ser visible, tanto en ordenadores como dispositivos.

Requerimientos de sistema

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

Navbar configuracion
Navbar móviles
Navbar ordenadores
Navbar instalar

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

// Añade item buscar menu wp-navbar para ordenadores
function item_buscar_nav_wrapper() {
  $wrap  = '<ul id="%1$s" class="%2$s">';
  $wrap .= '%3$s';
  $wrap .= '<li class="menu-item dropdown nav-item nav-item-search">';
  $wrap .= '<a class="nav-link" title="Abrir buscar" href="#" id="dropdownBuscar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
  $wrap .= '<i class="fas fa-search"></i>';
  $wrap .= '</a>';
  $wrap .= '<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBuscar">';
  $wrap .= '<form method="get" action="'.esc_url( home_url('/')).'">';
  $wrap .= '<div class="input-group st-navbar-desktop-input-group">';
  $wrap .= '<input type="text" class="form-control" data-provide="typeahead" value="" name="s" placeholder="'.esc_html__('Buscar ...', 'demos').'" aria-label="'.esc_html__('Buscar ...', 'demos').'">';
  $wrap .= '<div class="input-group-append">';
  $wrap .= '<button type="submit" class="btn btn-secondary"><i class="fas fa-search"></i></button>';
  $wrap .= '</div>';
  $wrap .= '</div>';
  $wrap .= '</form>';
  $wrap .= '</div>';
  $wrap .= '</li>';
  $wrap .= '</ul>'; 
  return $wrap;
}

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 animada toggle collapse, que tambien utilizamos para desplegar el formulario de búsqueda.

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">
      
      <!-- 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>
      
      <!-- 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', 'demos'); ?>">
            <?php include esc_url( get_template_directory() . '/img/icons/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ú', 'demos'); ?>">
            <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 esc_url( home_url( '/' ) ); ?>">
                <div class="input-group">
                  <input type="text" class="form-control" data-provide="typeahead" value="" name="s" placeholder="<?php esc_html_e('Buscar ...', 'demos'); ?>" aria-label="<?php esc_html_e('Buscar ...', 'demos'); ?>">
                  <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 nav -->
      <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('wp-navbar') ) {
                  wp_nav_menu( array(
                    'theme_location' => 'wp-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 menú wp-navbar</a></p>', admin_url( 'nav-menus.php' ) );
                }
                ?>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

navbar-mobile.css


.st-navbar-mobile {
  position: fixed;
  background-color: transparent;
  border-bottom: 1px solid #d5d5d5;
  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: #f5f5f5;
  border-bottom: 1px solid #d5d5d5;
}

/* Logo text */
.st-navbar-mobile-logo-text {
  margin: 0;
  padding: 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;
  }
}
.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;
    width: 114px;
    height: 28px;
  }
}
.st-navbar-mobile-logo-text a svg .cls-logo-grey {
  fill: #656565;
  -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: #5680cf;
}

/* Search icon */
.st-navbar-mobile-search-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-search-icon a {
  position: relative;
  display: block;
  background-color: transparent;
  width: 36px;
  height: 60px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 576px) {
  .st-navbar-mobile-search-icon a {
    width: 42px;
    height: 60px;
  }
}
.st-navbar-mobile-search-icon a svg {
  position: absolute;
  top: 22px;
  left: 10px;
  width: 16px;
  height: 16px;
  -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: 21px;
    left: 12px;
    width: 18px;
    height: 18px;
  }
}
.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 .cls-nb-mb-ico-search {
  fill: #656565;
}
.st-navbar-mobile-search-icon a:hover,
.st-navbar-mobile-search-icon a:focus {
  background-color: #e5e5e5;
}
.st-navbar-mobile-search-icon a:hover svg .cls-nb-mb-ico-search,
.st-navbar-mobile-search-icon a:focus svg .cls-nb-mb-ico-search {
  fill: #5680cf;
}

/* Bars icon */
.st-navbar-mobile-bars-icon {
  margin: 0;
  padding: 0;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn {
  display: block;
  padding: 0;
  width: 46px;
  height: 60px;
  background-color: transparent;
}
@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: 16px;
    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;
  height: 2px;
  margin: 0 0 5px;
  border-radius: 6px;
  background-color: #656565;
  -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 .bars-icon-img:after {
  margin: 0;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn:hover {
  background-color: #e5e5e5;
}
.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 {
  background-color: #5680cf;
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:before {
  -webkit-transform: translateY(7px) rotate(135deg);
  -moz-transform: translateY(7px) rotate(135deg);
  -ms-transform: translateY(7px) rotate(135deg);
  -o-transform: translateY(7px) rotate(135deg);
  transform: translateY(7px) rotate(135deg);
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img:after {
  -webkit-transform: translateY(-7px) rotate(-135deg);
  -moz-transform: translateY(-7px) rotate(-135deg);
  -ms-transform: translateY(-7px) rotate(-135deg);
  -o-transform: translateY(-7px) rotate(-135deg);
  transform: translateY(-7px) rotate(-135deg);
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img div {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.st-navbar-mobile-bars-icon a.bars-icon-btn.active,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active:hover {
  background-color: #e5e5e5;
}
.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,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active .bars-icon-img div
.st-navbar-mobile-bars-icon a.bars-icon-btn.active:hover .bars-icon-img:before,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active:hover .bars-icon-img:after,
.st-navbar-mobile-bars-icon a.bars-icon-btn.active:hover .bars-icon-img div {
  background-color: #5680cf;
}

/* Collapse search and bars */
.st-navbar-mobile-search-collapse,
.st-navbar-mobile-bars-collapse {
  position: absolute;
  z-index: 1500;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap,
.st-navbar-mobile-bars-collapse .st-collapse-wrap {
  position: relative;
  background-color: #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  border-radius: 0 0 6px 6px;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap .st-collapse-contents,
.st-navbar-mobile-bars-collapse .st-collapse-wrap .st-collapse-contents {
  position: relative;
  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 search */
.st-navbar-mobile-search-collapse {
  left: 0;
  right: 0;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap {
  padding: 15px 20px;
}
.st-navbar-mobile-search-collapse .st-collapse-wrap .st-collapse-contents {
  padding: 5px 0 7px;
  width: 100%;
  height: auto;
}

/* Collapse bars */
.st-navbar-mobile-bars-collapse {
  right: 0;
}
.st-navbar-mobile-bars-collapse .st-collapse-wrap {
  padding: 15px;
}
.st-navbar-mobile-bars-collapse .st-collapse-wrap .st-collapse-contents {
  overflow: scroll;
  background-color: #e5e5e5;
  width: 258px;
  height: auto;
}

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

/* Menu */
.st-navbar-mobile-menu {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-navbar-mobile-menu > li {
  border-top: 1px solid #c5c5c5;
}
.st-navbar-mobile-menu > li > a {
  display: block;
  padding: 10px 15px 10px 0;
  color: #656565;
}
.st-navbar-mobile-menu > li > a:hover,
.st-navbar-mobile-menu > li > a:focus {
  color: #5680cf;
}
.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.current_page_parent a,
.st-navbar-mobile-menu > li.current-menu-parent a,
.st-navbar-mobile-menu > li.current-menu-item a,
.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: #5680cf;
}
.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);
}

/* Menu dropdown */
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu {
  position: relative;
  display: none;
  width: 100%;
  margin: 0;
  padding: 4px 15px 20px 15px;
  font-size: 13px;
  list-style: none;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li {
  border-top: 1px solid #c5c5c5;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a {
  display: block;
  padding: 8px 0;
  color: #656565;
}
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a:hover,
.st-navbar-mobile-menu .st-navbar-mobile-dropdown-menu > li > a:focus,
.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: #5680cf;
}
.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;
}

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 add class 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 icon search */
    $('.search-icon-btn').click(function() {
      if($('.search-icon-btn').hasClass('active')){
        $(this).removeClass('active');
      }
      else{
        $(this).addClass('active');
      }
    });
        
    /* Navbar mobile icon bars */
    $('.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 */
    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 collapse close */
    $('.wrap').on('click', function() {
      $('#st-nb-mb-search-collapse').collapse('hide');
      $('#st-nb-mb-bars-collapse').collapse('hide');
      $('.bars-icon-btn').removeClass('active');
      $('.search-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);

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.

Con la función PHP «item_buscar_nav_wrapper()», del archivo functions.php, nos añade manualmente un elemento más al final del menú, el cual crea un dropdown que visualiza el formulario de búsqueda.

Veamos el markup de la navbar para ordenadores.

navbar-desktop.php


<div class="st-navbar-desktop st-navbar-desktop-style d-none d-md-block">
  <div class="container-fluid">
    <div class="row no-gutters align-items-center justify-content-between">
      
      <!-- 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('wp-navbar') ) {
            wp_nav_menu( array(            
              'theme_location' => 'wp-navbar',
              'container'      => false,
              'menu_class'     => 'st-navbar-desktop-menu',
              'fallback_cb'    => 'WP_Bootstrap_Navwalker::fallback',
              'items_wrap'     => item_buscar_nav_wrapper(),
              'depth'          => 2,
              'walker'         => new WP_Bootstrap_Navwalker(),
            ));
          } else {
            printf( '<p class="st-navbar-desktop-menu-error"><a href="%1$s">Asignar menú wp-navbar</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 {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 1400;
  background-color: transparent;
  border-bottom: 1px solid #d5d5d5;
  -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.st-navbar-desktop-scroll {
  background-color: #f5f5f5;
  border-bottom: 1px solid #d5d5d5;
}

/* Logo text */
.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: 146px;
  height: 36px;
}
.st-navbar-desktop-logo-text a svg .cls-logo-grey {
  fill: #656565;
  -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: #5680cf;
}

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

/* Nav menu */
.st-navbar-desktop-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-navbar-desktop-menu > li {
  float: left;
}
.st-navbar-desktop-menu > li a {
  margin: 0;
  padding: 20px 10px 20px 10px;
  font-size: 16px;
}
.st-navbar-desktop-menu > li:last-child a {
  padding-right: 0;
}
.st-navbar-desktop-menu li a {
  color: #656565;
}
.st-navbar-desktop-menu li a:hover,
.st-navbar-desktop-menu li a:focus {
  color: #5680cf;
}
.st-navbar-desktop-menu li.current_page_parent a,
.st-navbar-desktop-menu li.current-menu-parent a,
.st-navbar-desktop-menu li.current-menu-item a,
.st-navbar-desktop-menu li.nav-item-search.show a,
.st-navbar-desktop-menu li.current_page_parent a:hover,
.st-navbar-desktop-menu li.current-menu-parent a:hover,
.st-navbar-desktop-menu li.current-menu-item a:hover,
.st-navbar-desktop-menu li.nav-item-search.show a:hover,
.st-navbar-desktop-menu li.current_page_parent a:focus,
.st-navbar-desktop-menu li.current-menu-parent a:focus,
.st-navbar-desktop-menu li.current-menu-item a:focus,
.st-navbar-desktop-menu li.nav-item-search.show a:focus {
  color: #5680cf;
}

/* Nav menu icon search */
.st-navbar-desktop-menu > li.nav-item-search > a > i {
  -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-menu > li.nav-item-search.show > a > i {
  -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);
}

/* Nav menu dropdown */
.st-navbar-desktop-menu li.dropdown a.dropdown-toggle::after {
  margin-top: 0;
  margin-left: 3px;
  vertical-align: .21em;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.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-menu li.dropdown .dropdown-menu {
  margin: 0 0 0 -1px;
  padding: 0;
  box-shadow: none;
  border-radius: 0 0 6px 6px;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li a {
  margin: 0;
  padding: 15px 10px 15px 10px;
  font-size: 14px;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu-right {
  margin: 0 -1px 0 0;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu-right > li a {
  text-align: right;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #d5d5d5;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li a {
  color: #656565;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li a:hover,
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li a:focus {
  background-color: #e5e5e5;
  color: #5680cf;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a,
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a:hover,
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li.current-menu-item a:focus {
  background-color: #e5e5e5;
  color: #5680cf;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu > li + li {
  border-top: 1px solid #d5d5d5;
}
.st-navbar-desktop-menu li.dropdown .dropdown-menu .st-navbar-desktop-input-group {
  width: 407px;
  margin: 20px;
}

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() >= 1) {
          $('.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="header">
  <?php get_template_part( '/inc/navbar', 'mobile' ); ?>
  <?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

WordPress Bootstrap 4 navbar

WordPress Bootstrap 4 navbar

Requerimientos de sistema

Navbar configuración

Navbar móviles

Navbar ordenadores

Navbar instalar

Deja una respuesta Cancelar la respuesta

WordPress Bootstrap 4 navbar

WordPress Bootstrap 4 navbar

Requerimientos de sistema

Navbar configuración

Navbar móviles

Navbar ordenadores

Navbar instalar

Compartir

Snippets relacionados

WordPress Bootstrap 4 navbar topmenu

WordPress límite caracteres

Deja una respuesta Cancelar la respuesta