WordPress Bootstrap 4 navbar topmenu

WordPress Bootstrap 4 navbar topmenu
WordPress Bootstrap 4 navbar topmenu
WordPress Demo Descargar
WordPress navbar Demo Descargar

Insertamos la navbar de Bootstrap 4 y le añadimos un topmenu, dentro de un tema de WordPress. Dispone de submenus dropdowns, para un segundo nivel de navegación, permite alinear sus contenidos y es totalmente responsive.

Anteriormente ya publicamos el snippet WordPress Bootstrap 4 Navbar, que entre otras cosas hablo de la importancia que tiene la navbar o, barra de navegación para una página Web y como debe de ser esta. Te recomiendo visites la página y le eches un vistazo, pulsando aquí.

Este snippet explica como insertar una barra de navegación principal con la ayuda de Bootstrap 4 en un tema de WordPress. Creamos dos navbars una para ordenadores y otra para dispositivos, el cambio de navbars se hace cuando la medida del ancho de pantalla es superior a 756 pixeles y las vistas de las barras cambian. Esto se hace así debido a los tantos anchos de pantalla que debe de adaptarse.

Tenemos que añadir que la navbar que veremos en ordenadores, en su parte superior tiene un topmenu para poder añadir mas contenidos, pero que solo son visibles en la parte superior de la ventana.

En cambio en la barra visible en dispositivos, todos estos contenidos se simplifican y se reparten por el corto espacio, pero siguen estando todos, y claro, con esta misma mecánica de estilos podríamos añadir más facilmente.

Las dos navbar son totalmente cunfigurables con la estructura de diseño de columnado de Bootstrap 4, dotada inicialmente de las típicas necesidades actuales tales como: Dropdowns, que puedes alinear la apertura los contenidos, formulario de búsqueda y teléfono.

Pasemos al código y los requerimientos.

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

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('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.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-tm' => __('WP Navbar topmenu', 'demos'),
));

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

Incluimos la clase wp-bootstrap-navwalker, solo necesaria para la navbar de ordenadores, la cual hace dinámico nuestro menú Bootstrap 4 en WordPress.

Los archivos de estilos, scripts, de como instalarla y configurarla, lo explicamos a continuación, en cada secció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-tm') ) {
                  wp_nav_menu( array(
                    'theme_location' => 'wp-navbar-tm',
                    '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 WP Navbar topmenu</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: 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);

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 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', 'demos'); ?>">
              <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">
          <li class="dropdown nav-item nav-item-search">
            <a id="dropdownMenuButton" href="#" class="nav-link" data-toggle="dropdown" title="<?php esc_html_e('Buscar', 'demos'); ?>" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-search"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <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 en la página Web ...', 'demos'); ?>" aria-label="<?php esc_html_e('Buscar en la página Web ...', 'demos'); ?>">
                  <div class="input-group-append">
                    <button type="submit" class="btn btn-primary"><?php esc_html_e('Buscar', 'demos'); ?></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;
  background-color: transparent;
  border-bottom: 1px solid #656565;
  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: #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-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: #5680cf;
}

/* 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 > 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-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.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);
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li > a {
  color: #656565;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.show > a,
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li > a:hover,
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li > a:focus {
  color: #5680cf;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.dropdown > a.nav-link {
  padding-right: 0;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  margin: 1px 0 0 0;
  padding: 0;
  border-top: 0px solid #f5f5f5;
  border-right: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  border-radius: 0 0 6px 6px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.dropdown .dropdown-menu .input-group {
  width: 500px;
  margin: 20px;
}
.st-navbar-tm-desktop .st-nb-tm-col-right .st-nb-tm-right-ul li.dropdown .dropdown-menu .input-group input.form-control::placeholder {
  color: #aaaaaa;
}

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('wp-navbar-tm') ) {
            wp_nav_menu( array(            
              'theme_location' => 'wp-navbar-tm',
              '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 menú wp-navbar-tm</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;
  border: 0;
  z-index: 1400;
  background-color: transparent;
  border-bottom: 1px solid #656565;
  -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: #f5f5f5;
  border-bottom: 1px solid #d5d5d5;
}
.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 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.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.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 {
  color: #5680cf;
}

/* 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() >= 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="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
Snippets relacionados
WordPress Bootstrap 4 navbar
WordPress Bootstrap 4 navbar
WordPress límite caracteres
WordPress límite caracteres

Deja una respuesta

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