jmccole83
2/25/2019 - 7:35 PM

Custom fields to control menu, mobile menu visibility and mobile menu style.

Example code snippets to output a menu, mobile menu, menu toggle and the mobile menu's style.

Requires several custom fields to be setup:

"Breakpoint" - a Button Group with the options:

d-none d-xl-block : Extra Large (1200px) d-none d-lg-block : Large (992px) d-none d-md-block : Medium (768px) d-none d-sm-block : Small (576px)

"Menu Style" - a Button Group with options:

Slide In Right Slide In Left Slide Down Fade In

Add these fields to a menu named 'mobile_navigation'. Example also also includes Bootstrap Nav Walker (see Nav Walker snippet).

Apply your own custom styles and JS to toggle menu visibility (Slide in/down/fade). Update snippets to suit design as required.

App.php
content_copyfile_download
public function mobile_breakpoint()
{
    $menu_name = 'mobile_navigation';
    $locations = get_nav_menu_locations();
    $menu_id = $locations[ $menu_name ] ;
    $menu = wp_get_nav_menu_object($menu_id);
    return get_field('breakpoint', $menu);
}

public function menu_style()
{
    $menu_name = 'mobile_navigation';
    $locations = get_nav_menu_locations();
    $menu_id = $locations[ $menu_name ] ;
    $menu = wp_get_nav_menu_object($menu_id);
    return get_field('menu_style', $menu);
}

public function mobile_menu_style()
{
  $menu_name = 'mobile_navigation';
  $locations = get_nav_menu_locations();
  $menu_id = $locations[ $menu_name ] ;
  $menu = wp_get_nav_menu_object($menu_id);
  $menu_style = get_field('menu_style', $menu);
  switch($menu_style) {
    case('Slide In Left'):
      $menu_classes = ' mobile-menu--left';
      break;
    case('Slide In Right'):
      $menu_classes = ' mobile-menu--right';
      break;
    case('Fade In'):
      $menu_classes = ' mobile-menu--fade-in';
      break;
    case('Slide Down'):
      $menu_classes = ' mobile-menu--slide-down';
      break;
  }
  return $menu_classes;;
}

public function mobile_menu_button_class()
{
  $menu_name = 'mobile_navigation';
  $locations = get_nav_menu_locations();
  $menu_id = $locations[ $menu_name ] ;
  $menu = wp_get_nav_menu_object($menu_id);
  $menu_style = get_field('menu_style', $menu);
  switch($menu_style) {
    case('Slide In Left'):
      $button_class = ' open-menu--left';
      break;
    case('Slide In Right'):
      $button_class = ' open-menu--right';
      break;
    case('Fade In'):
      $button_class = ' open-menu--fade-in';
      break;
    case('Slide Down'):
      $button_class = ' open-menu--slide-down';
      break;
  }
  return $button_class;
}

public function mobile_classes()
{
  $menu_name = 'mobile_navigation';
  $locations = get_nav_menu_locations();
  $menu_id = $locations[ $menu_name ] ;
  $menu = wp_get_nav_menu_object($menu_id);
  $mobile_breakpoint = get_field('breakpoint', $menu);
  switch($mobile_breakpoint) {
    case('d-none d-xl-block'):
      $button_classes = ' d-flex d-xl-none';
      break;
    case('d-none d-lg-block'):
      $button_classes = ' d-flex d-lg-none';
      break;
    case('d-none d-md-block'):
      $button_classes = ' d-flex d-md-none';
      break;
    case('d-none d-sm-block'):
      $button_classes = ' d-flex d-sm-none';
      break;
  }
  return $button_classes;
}
header.blade.php
content_copyfile_download
@include('partials.mobile_menus')
<header class="banner">
  <div class="container">
    <a class="brand" href="{{ home_url('/') }}" style="background-image: url({!! $site_logo['url'] !!});">
      <span class="sr-only">{{ $site_name }}</span>
    </a>
    <div class="mobile-open {!! $mobile_menu_button_class, $mobile_classes !!}" aria-hidden="true">
      <span class="sr-only">Open mobile menu</span>
    </div>
    <nav class="nav-primary {!! $mobile_breakpoint !!}">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu([
          'theme_location'  => 'primary_navigation',
          'depth'           => 2,
          'menu_class'      => 'nav',
          'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
          'walker'          => new WP_Bootstrap_Navwalker(),
        ]) !!}
      @endif
    </nav>
  </div>
</header>
@include('partials.slide_down_menu')
slide_down_menu.blade.php
content_copyfile_download
@if ( $menu_style == 'Slide Down' )
  <div class="mobile-menu {!! $mobile_menu_style !!}">
    <span class="close-menu" aria-hidden="true">
      <span class="sr-only">Close menu</span>
    </span>
    <nav class="nav-primary">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu([
          'theme_location'  => 'primary_navigation',
          'depth'           => 2,
          'menu_class'      => 'nav',
          'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
          'walker'          => new WP_Bootstrap_Navwalker(),
        ]) !!}
      @endif
    </nav>
  </div>
@endif
mobile_menu.blade.php
content_copyfile_download
@if ( $menu_style != 'Slide Down' )
  <div class="mobile-menu {!! $mobile_menu_style, $mobile_classes !!}">
    <nav class="nav-primary">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu([
          'theme_location'  => 'primary_navigation',
          'depth'           => 2,
          'menu_class'      => 'nav',
          'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
          'walker'          => new WP_Bootstrap_Navwalker(),
        ]) !!}
      @endif
    </nav>
  </div>
@endif
common.js
content_copyfile_download
// Open Mobile Menu
$('.open-menu--right').click(function(){
  $('.mobile-menu--right').addClass('mobile-menu--right--right-reset');
  $('.overlay').addClass('overlay--visible');
});

$('.open-menu--left').click(function(){
  $('.mobile-menu--left').addClass('mobile-menu--left--left-reset');
  $('.overlay').addClass('overlay--visible');
});

$('.open-menu--fade-in').click(function(){
  $('.mobile-menu--fade-in').addClass('mobile-menu--fade-in--visible');
});

$('.open-menu--slide-down').click(function(){
  $('.mobile-menu--slide-down').slideToggle(600);
});