Nav Menu Disappearing

This support request was posted in Paeon by dentprio

Request ID #30617 Resolved
  • The nav menu disappears on mobile devices when scrolling. I’m using an iPhone 7 but have seen the issue on Android devices, as well.

    If you open the menu and just click on a menu item, it works fine, but the second you start scrolling with the menu open, it disappears.

    Thanks for looking into this!

    Hi Dentprio,

    Thank you for writing. I hope you are doing well.

    Would you please tell me what version of the theme are you currently running? We’ve fixed similar issues in the recent releases for other devices.

    Best,
    Juan.

    I believe it’s all updated:
    Your Framework version for this site: 1.1.6
    You are running the theme: Paeon
    Version: 1.1.7

    Hi,

    Thank you for the follow up. Yes, you are up to date.

    Apart from the iPhone 7, can you specify any other device in which you experienced this?

    Thank you,
    Juan.

    I tried it on a Samsung Galaxy S6 and had the same result.

    Thanks for the follow up.

    We’ll be taking a look at it and we’ll come back to you as soon as we can.

    Best,
    Juan.

    Thanks, Juan. I appreciate it!

    Hi,

    Thanks for your patience.

    Quick question, do you have the same problem when visiting the demo site from these devices? I’m not being able to recreate the issue yet.

    Thanks,
    Juan.

    Hi,

    Thanks for waiting, I can see perhaps you’re using an iPhone 7 Plus, right?

    Would you please try adding the following CSS into your custom css field or file?

    body.iphone.has-slider #header {
    background-color: #528BCB;
    background-image: none;
    border-bottom: 7px solid rgba(0, 0, 0, 0.1);
    padding: 0;
    position: relative;
    }
    body.iphone #logo {
    margin-left: 15px;
    }
    body.iphone #top #navigation .nav li ul li a {
    padding: 15px 10px;
    width: auto;
    }
    body.iphone #top #navigation .nav li ul li:last-child a {
    border-bottom: none;
    }
    body.iphone #header #navigation {
    clear: both;
    display: none;
    float: none;
    }
    body.iphone #header #navigation ul {
    width: 100%;
    }
    body.iphone #header #navigation li {
    float: none;
    width: 100%;
    }
    body.iphone #navigation .nav li a {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 15px 10px;
    }
    body.iphone #navigation .nav li:last-child a {
    border-bottom: none;
    }
    body.iphone #navigation .nav li a.sf-with-ul {
    background-image: none;
    }
    body.iphone #header #navigation li ul{
    background-color: transparent;
    left: 0;
    margin-left: 30px;
    position: relative;
    top: 0;
    width: auto;
    }
    body.iphone #navigation,
    body.iphone .home-block {
    margin: 0 auto;
    max-width: 100%;
    }
    body.iphone.has-slider #header #top {
    background: none;
    margin-top: 0;
    }
    body.iphone #header #top #toggle-nav {
    display: block;
    }
    body.iphone.has-slider #featured-wrap,
    body.iphone.has-slider #content-top {
    position: relative;
    }
    body.iphone .slide-info {
    padding-top: 30px;
    }

    Best,
    Juan.

    Note: You can learn how to add custom CSS here https://nicethemeswp.com/article/how-to-customize-a-theme/

    Hi Juan,

    It’s actually on a regular iPhone 7. Since we last talked I’ve also had it replicated on an iPhone 6 (in addition to the Galaxy S6).

    I also tried adding the custom CSS and cleared my browsers cache, but the menu still disappears.

    Are you able to replicate these same issues on your end?

    – Alex

    Hi Alex,

    Thanks for the follow up.

    I was now able to replicate the issue. We’ll look into it and come back to you.

    Thanks again,
    Juan.

    Thanks, Juan!

    Hi Alex,

    Thank you for the follow up. Would you please try replacing the file /paeon/includes/assets/js/nice-general.js with this new one? (you can save the raw file if you click “raw file” and then “File > Save As”)

    /* global script variables */
    var $parallax_effect = true;
    var window_width = 0;
    jQuery(document).ready( function($) {
    isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? true : false;
    /* Handles functionality that depends on window resize */
    innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    window_width = Math.max( jQuery( window ).width(), innerWidth );
    jQuery( window ).resize(function() {
    adjust_nav_functionality( true );
    });
    // fancybox
    jQuery('.fancybox').fancybox();
    // superfish
    if ( ( window_width > 1024 ) || ( isMobile && window_width > 1366 ) ) { // fix for iPad Pro
    jQuery('#header #main-nav').superfish({
    disableHI: true
    });
    }
    var filterLinks = jQuery('#filter li');
    filterLinks.click( function(e) {
    filterLinks.removeClass('active');
    filterLinks.not(this).find('span.border').fadeOut(100);
    jQuery(this).addClass('active');
    e.preventDefault();
    });
    filterLinks.hover( function() {
    jQuery(this).not('.active').find('.border').stop().css({
    opacity: 0,
    display: 'block'
    }).animate({
    opacity: 1
    }, 150);
    }, function() {
    jQuery(this).not('.active').find('.border').stop().fadeOut(150);
    });
    if ( jQuery().quicksand ) {
    (function($) {
    $.fn.sorted = function(customOptions) {
    var options = {
    reversed: false,
    by: function(a) {
    return a.text();
    }
    };
    $.extend(options, customOptions);
    var $data = jQuery(this);
    var arr = $data.get();
    arr.sort(function(a, b) {
    var valA = options.by($(a));
    var valB = options.by($(b));
    if (options.reversed) {
    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
    } else {
    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
    }
    });
    return $(arr);
    };
    })(jQuery);
    jQuery(function() {
    var read_button = function(class_names) {
    var r = {
    selected: false,
    type: 0
    };
    for ( var i = 0; i < class_names.length; i++ ) {
    if ( class_names[i].indexOf('selected-') === 0 ) {
    r.selected = true;
    }
    if ( class_names[i].indexOf('segment-') === 0 ) {
    r.segment = class_names[i].split('-')[1];
    }
    }
    return r;
    };
    var determine_sort = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
    };
    var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
    };
    var $preferences = {
    duration: 500,
    adjustHeight: 'dynamic'
    };
    var $list = jQuery('#services');
    var $data = $list.clone();
    var $controls = jQuery('#filter');
    $controls.each( function(i) {
    var $control = jQuery(this);
    var $buttons = $control.find('a');
    $buttons.bind('click', function(e) {
    var $button = jQuery(this);
    var $button_container = $button.parent();
    var button_properties = read_button($button_container.attr('class').split(' '));
    var selected = button_properties.selected;
    var button_segment = button_properties.segment;
    if ( ! selected ) {
    $buttons.parent().removeClass();
    $button_container.addClass('selected-' + button_segment);
    var sorting_type = determine_sort($controls.eq(1).find('a'));
    var sorting_kind = determine_kind($controls.eq(0).find('a'));
    var $filtered_data = '';
    if ( sorting_kind === 'all' ) {
    $filtered_data = $data.find('li');
    } else {
    $filtered_data = $data.find('li.' + sorting_kind);
    }
    var $sorted_data = $filtered_data.sorted({
    by: function(v) {
    return parseInt(jQuery(v).find('.count').text());
    }
    });
    $list.quicksand($sorted_data, $preferences, function () {
    jQuery( '.service-grid-two-col li').css( 'opacity', 1 );
    jQuery( '.service-grid-two-col li' ).css('filter','');
    });
    }
    e.preventDefault();
    });
    });
    });
    }
    /* The scripts that depends on scroll event */
    var $is_backtotop_displayed = false;
    var $scroll_position = 0;
    var $flex_caption_opacity = 1;
    var $ratio = 1;
    /* Handles on page load parallax effect */
    perform_parallax_effect();
    jQuery(window).scroll( function () {
    $scroll_position = jQuery(this).scrollTop();
    /* Handles on scroll parallax effect */
    if( $parallax_effect ){
    perform_parallax_effect();
    }
    /* Handles home page flex slider caption opacity */
    $ratio = $scroll_position / jQuery( '#featured .flex-caption' ).outerHeight();
    $flex_caption_opacity = 1 - $ratio;
    if ( $flex_caption_opacity <= 1 && $flex_caption_opacity >= 0 ) {
    jQuery( '#featured .flex-caption' ).css( 'opacity', $flex_caption_opacity );
    }
    /* back to top button script */
    if ( $scroll_position < 100 && $is_backtotop_displayed ) {
    jQuery('.backtotop').animate({ bottom: '-30px' }, 100);
    $is_backtotop_displayed = false;
    } else if ( $scroll_position > 100 && ! $is_backtotop_displayed ) {
    jQuery('.backtotop').animate({ bottom: '17px' }, 100);
    $is_backtotop_displayed = true;
    }
    });
    // scroll body to 0px on click
    jQuery('.backtotop').click(function () {
    jQuery('html, body').animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });
    jQuery(window).load( function($) {
    /* Handles responsive menu */
    jQuery("#header #top #toggle-nav").click(function() {
    jQuery("#header #navigation").slideToggle( 'slow' );
    return false;
    });
    jQuery('#navigation .nav li .sub-menu').siblings('.down-arrow').addClass('active-down-arrow');
    adjust_nav_functionality( false );
    jQuery("#header #navigation li .active-down-arrow").click(function() {
    jQuery(this).siblings(".sub-menu").toggle();
    return false;
    });
    });
    var last_width = 0;
    /**
    * Adjusts functionality of header navigation
    */
    function adjust_nav_functionality( resizing ) {
    var current_window_width = jQuery( window ).width();
    if ( isMobile && resizing && ( window_width === current_window_width ) ) {
    return;
    }
    window_width = current_window_width;
    if ( ( ( ! isMobile && window_width > 1024 ) || ( isMobile && window_width > 1366 ) ) ) {
    jQuery('#header #main-nav').superfish();
    jQuery('#navigation li .down-arrow-anchor .down-arrow, .active-down-arrow').hide();
    jQuery('#header #navigation').show();
    } else if ( ( window_width <= 1024 && last_width !== window_width ) || ( isMobile && window_width <= 1366 ) && last_width !== 1366 ) {
    jQuery('#header #main-nav').superfish('destroy');
    jQuery('#navigation li .down-arrow-anchor .down-arrow, .active-down-arrow').show();
    jQuery('#header #navigation').hide();
    }
    last_width = window_width;
    }
    /**
    * Checkes whether the given element is visible in viewport area
    */
    function isElementInViewport( element ) {
    if ( element ) {
    var rect = element.getBoundingClientRect();
    return ( !!rect && rect.bottom >= 0 && rect.right >= 0 && rect.top <= jQuery(window).height() && rect.left <= jQuery(window).width() );
    }
    }
    /**
    * Adjust the wrapper margin for the given slide.
    */
    function adjust_wrapper_margin( slide, animation_duration ) {
    var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var window_width = Math.max( jQuery( window ).width(), innerWidth );
    var margin_top = 0;
    var isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? true : false;
    if ( ( ! isMobile && window_width > 1024 ) || ( isMobile && window_width > 1366 ) ) {
    margin_top = jQuery( '#featured .slide:not(.clone)' ).eq(slide).outerHeight();
    if ( typeof animation_duration !== 'undefined' ) {
    animation_duration = animation_duration;
    }
    } else {
    animation_duration = 100;
    }
    if ( typeof animation_duration === 'undefined' ) {
    animation_duration = 100;
    }
    jQuery( '#wrapper' ).stop().animate( { marginTop: margin_top + 'px' }, animation_duration );
    } // End adjust_wrapper_margin()
    /**
    * Adjust the height for the current slide based on content
    */
    function adjust_slide_height( slide ) {
    var current_height = jQuery( '#featured .slide:not(.clone)' ).eq(slide).outerHeight();
    jQuery( '#featured .flex-viewport' ).css( 'height' , current_height + 'px' );
    }
    /**
    * Perform parallax effect
    */
    function perform_parallax_effect() {
    var $parallax_effect_item = '';
    if ( jQuery('#home-service #service li').length !== 0 ) {
    $parallax_effect_item = '#home-service #service li';
    }
    if ( jQuery('.service-grid-two-col li').length !== 0 ) {
    $parallax_effect_item = '.service-grid-two-col li';
    }
    if ( jQuery('.feedback .feedback-grid').length !== 0 ) {
    $parallax_effect_item = '.feedback .feedback-grid li';
    }
    if ( $parallax_effect_item !== '' ){
    var element_index = 0;
    jQuery($parallax_effect_item).each( function() {
    if ( ( jQuery('html.ie8').length !== 0 || window_width <= 600 ) || ( ! jQuery(this).hasClass('nice-effect') && ( isElementInViewport( jQuery(this)[0] ))) ){
    jQuery(this).addClass('nice-effect');
    var retain_this = this;
    setTimeout( function(){
    jQuery(retain_this).stop().animate({
    'opacity': 1
    }, 1000, function() {
    if( jQuery('html.ie8').length !== 0 ){
    jQuery(retain_this).css('filter','');
    jQuery('.ie8 .home-service .view, .ie8 .service-grid-two-col .view').css( 'position', 'relative' );
    jQuery('.ie8 .home-service .mask, .ie8 .service-grid-two-col .view-more .mask').show();
    }
    });
    }, ( 300 * (element_index + 1) ) );
    element_index++;
    }
    });
    if( jQuery('html.ie8').length !== 0 ){
    $parallax_effect = false;
    }
    }
    }

    I’m not sure why but this message was already posted last Friday and disappeared. Sorry for the delay.

    Best,
    Juan.

    Worked perfectly. Thanks again!

    Hi Alex,

    Thanks for the follow up. I’m happy to hear that.

    We’ll be including these changes in the upcoming version.

    Have a nice day,
    Juan.

Viewing 15 posts - 1 through 15 (of 15 total)

This topic is marked as resolved

Only the topic author can re-open this thread.

Login to your Account

Welcome back! Please log in to your account by filling the fields below:

Not a member? Create a free account.

Create a Free Account