diff --git a/functions.php b/functions.php index fc038639..7d6482f2 100644 --- a/functions.php +++ b/functions.php @@ -266,6 +266,7 @@ function siteorigin_north_scripts() { wp_localize_script( 'siteorigin-north-script', 'siteoriginNorth', array( 'smoothScroll' => siteorigin_setting( 'navigation_smooth_scroll' ), 'logoScale' => is_numeric( $logo_sticky_scale ) ? $logo_sticky_scale : 0.755, + 'collapse' => siteorigin_setting( 'responsive_menu_breakpoint' ), ) ); // jQuery FitVids. diff --git a/inc/extras.php b/inc/extras.php index 26e00065..045ce480 100644 --- a/inc/extras.php +++ b/inc/extras.php @@ -22,7 +22,6 @@ function siteorigin_north_body_classes( $classes ) { $classes[] = 'no-js'; $classes[] = 'css3-animations'; - $classes[] = 'no-touch'; if ( siteorigin_setting( 'responsive_disabled' ) == false ) { $classes[] = 'responsive'; } diff --git a/inc/template-tags.php b/inc/template-tags.php index bfcf8315..dedca2b0 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -400,7 +400,7 @@ function siteorigin_north_custom_icon( $icon, $class ) { function siteorigin_north_display_icon( $type ) { switch ( $type ) { case 'menu': - if ( siteorigin_setting( 'icons_menu' ) ) : ?> + if ( siteorigin_setting( 'icons_menu' ) && wp_attachment_is_image( siteorigin_setting( 'icons_menu' ) ) ) : ?>
@@ -412,7 +412,7 @@ function siteorigin_north_display_icon( $type ) { break; case 'close': - if ( siteorigin_setting( 'icons_close_search' ) ) : ?> + if ( siteorigin_setting( 'icons_close_search' ) && wp_attachment_is_image( siteorigin_setting( 'icons_close_search' ) ) ) : ?> + if ( siteorigin_setting( 'icons_scroll_to_top' ) && wp_attachment_is_image( siteorigin_setting( 'icons_scroll_to_top' ) ) ) : ?> @@ -445,7 +445,7 @@ function siteorigin_north_display_icon( $type ) { break; case 'search': - if ( siteorigin_setting( 'icons_search' ) ) : ?> + if ( siteorigin_setting( 'icons_search' ) && wp_attachment_is_image( siteorigin_setting( 'icons_search' ) ) ) : ?> diff --git a/js/north.js b/js/north.js index 18a38a21..a957b47a 100644 --- a/js/north.js +++ b/js/north.js @@ -112,33 +112,32 @@ jQuery( function( $ ) { $( '.entry-content, .entry-content .panel, .woocommerce #main' ).fitVids( { ignore: '.tableauViz' } ); } - // This this is a touch device. We detect this through ontouchstart, msMaxTouchPoints and MaxTouchPoints. + // Detect if is a touch device. We detect this through ontouchstart, msMaxTouchPoints and MaxTouchPoints. if ( 'ontouchstart' in document.documentElement || window.navigator.msMaxTouchPoints || window.navigator.MaxTouchPoints ) { - $('body').removeClass('no-touch'); - } - if ( !$( 'body' ).hasClass( 'no-touch' ) ) { if ( /iPad|iPhone|iPod/.test( navigator.userAgent ) && ! window.MSStream ) { $( 'body' ).css( 'cursor', 'pointer' ); + $( 'body' ).addClass( 'ios' ); } - $( '.main-navigation #primary-menu').find('.menu-item-has-children > a' ).each( function() { - $( this ).click( function( e ) { + + $( '.main-navigation #primary-menu' ).find( '.menu-item-has-children > a' ).each( function() { + $( this ).on( 'click touchend', function( e ) { var link = $( this ); e.stopPropagation(); - link.parent().addClass( 'touch-drop' ); + + if ( e.type == 'click' ) { + return; + } - if ( link.hasClass( 'hover' ) ) { - link.unbind( 'click' ); - } else { - link.addClass( 'hover' ); + if ( ! link.parent().hasClass( 'hover' ) ) { + // Remove .hover from all other sub menus + $( '.menu-item.hover' ).removeClass( 'hover' ); + link.parents('.menu-item').addClass( 'hover' ); e.preventDefault(); } - $( '.main-navigation #primary-menu > .menu-item-has-children:not(.touch-drop) > a' ).click( function() { - link.removeClass('hover').parent().removeClass('touch-drop'); - } ); - - $( document ).click( function() { - link.removeClass( 'hover' ).parent().removeClass( 'touch-drop' ); + // Remove .hover class when user clicks outside of sub menu + $( document ).one( 'click', function() { + link.parent().removeClass( 'hover' ); } ); } ); @@ -154,18 +153,6 @@ jQuery( function( $ ) { container: ".search-form" } ); - var resetMenu = function() { - $( '.main-navigation ul ul' ).each( function() { - var $$ = $( this ); - var width = Math.max.apply( Math, $$.find( '> li > a' ).map( function() { - return $( this ).width(); - } ).get() ); - $$.find( '> li > a' ).width( width ); - } ); - }; - resetMenu(); - $( window ).resize( resetMenu ); - var alignMenu = function() { $( '#primary-menu > li > ul.sub-menu' ).each( function() { var $$ = $( this ); @@ -427,6 +414,11 @@ jQuery( function( $ ) { $( window ).scroll( smShadow ); var smSetup = function() { + + if ( $( 'body' ).hasClass( 'mobile-header-ns' ) && ( $( window ).width() < siteoriginNorth.collapse ) ) { + return; + } + if ( ! $( 'body' ).hasClass( 'page-layout-menu-overlap' ) ) { $mhs.css( 'height', $mh.outerHeight() ); } diff --git a/readme.txt b/readme.txt index 2a0dd90e..69e0fb5c 100644 --- a/readme.txt +++ b/readme.txt @@ -96,6 +96,11 @@ Original design files are available on [Google Drive](https://drive.google.com/f == Changelog == += 1.6.8 - 14 March 2019 = +* Added a fallback to the default theme icon if a custom icon is missing. +* Allow main menu hovers when Touch UI Layout is enabled. +* Added a body class option to disable the sticky header on mobile. + = 1.6.7 - 27 February 2019 = * Removed Jetpack Responsive Videos support in favour of FitVids. diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss index d31d3ed6..db24c6a0 100644 --- a/sass/navigation/_menus.scss +++ b/sass/navigation/_menus.scss @@ -98,7 +98,7 @@ } } - @at-root body.no-touch & { + @at-root body:not(.ios) & { li:hover, li.focus { @@ -114,7 +114,7 @@ } } - .touch-drop { + li.hover { > ul { opacity: 1; diff --git a/style.css b/style.css index 307785ab..d95992fa 100644 --- a/style.css +++ b/style.css @@ -585,8 +585,8 @@ a { .main-navigation ul ul a:hover, .main-navigation ul ul a.focus { color: #595959; } - body.no-touch .main-navigation ul li:hover > ul, - body.no-touch .main-navigation ul li.focus > ul { + body:not(.ios) .main-navigation ul li:hover > ul, + body:not(.ios) .main-navigation ul li.focus > ul { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); @@ -594,10 +594,10 @@ a { -o-transform: scale(1); transform: scale(1); visibility: visible; } - body.no-touch .main-navigation ul li:hover:after, - body.no-touch .main-navigation ul li.focus:after { + body:not(.ios) .main-navigation ul li:hover:after, + body:not(.ios) .main-navigation ul li.focus:after { content: ''; } - .main-navigation ul .touch-drop > ul { + .main-navigation ul li.hover > ul { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); @@ -605,7 +605,7 @@ a { -o-transform: scale(1); transform: scale(1); visibility: visible; } - .main-navigation ul .touch-drop:after { + .main-navigation ul li.hover:after { content: ''; } .main-navigation .menu > li.current-menu-item > a, .main-navigation .menu > li.current-menu-ancestor > a { color: #292929; }