Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1335604

    a096399
    Participant

    Hi All,

    I am having some issues with the mobile menu on a site I built using X Theme. I have a Samsung Galaxy S7 Phone and am using Chrome as my browser (if any of this matters or helps)

    The website is loveandwarintexas.com

    Mobile Menu issues I am experiencing:

    – The mobile menu is not allowing the sublinks to open under “Texas Food”.
    – The menu is not closing upon link selection/click
    – The mobile menu initially pushes down the website on website load, however, if you scroll down on the website and then scroll back up to the top, the mobile menu covers part of the website.

    Thanks you in advance for your help! I will send the login credentials in a separate submission.

    -Adam

    #1335605

    a096399
    Participant
    This reply has been marked as private.
    #1335663

    a096399
    Participant

    Forgot one thing! How would I center the L&W logo within the mobile menu?

    Thanks!

    Adam

    #1336122

    Lely
    Moderator

    Hello Adam,

    I can duplicate the issue on my mobile. Please check this thread for fixed:https://community.theme.co/forums/topic/submenu-not-working-on-mobile-2/

    Centering the logo means the mobile menu will go on the next row. To do that, please add the following CSS:

    @media (max-width: 979px){
    .x-brand {
        float: none;
        text-align: center;
    }
    }

    Hope this helps.

    #1336158

    a096399
    Participant

    Perfect!!! Thank you!!!

    Now, how do we make the mobile menu collapse when a link is clicked?

    Also, the mobile menu initially pushes down the website on website load, however, if you scroll down on the website and then scroll back up to the top, the mobile menu covers part of the website. How do we fix this?

    Thanks!

    Adam

    #1336285

    Rupok
    Member

    Hey Adam,

    Thanks for writing back. You can add this under Custom > JavaScript in the Customizer.

    jQuery(function($){
      $('.x-nav li a').click(function(e){
        
        var hash = $(this).attr('href').split("#").slice(-1)[0];
        var outbound = /^https?:\/\//i;
    
        if(hash && !outbound.test( $(this).attr('href') )) {
    	    e.preventDefault();
    	    $('html,body').animate({
    	      scrollTop: $('#' + hash ).offset().top - $('header.masthead').height()
    	    },700 ,'swing');
    	    $('.x-btn-navbar').click();
    	}
    
      });
    });

    Cheers!

    #1364821

    a096399
    Participant

    Hi All,

    Thank you so much for the reply. Very sorry that I am so late getting back to this. I tried this code in the above post but on my phone it didn’t work unfortunately. Menu doesn’t close on mobile when a menu item is clicked and also if you scroll down in mobile, and then scroll back all the way to the top the menu covers up the slider. I have included a screenshot for reference 🙂

    Thank you so much in advance!

    Adam

    #1364832

    a096399
    Participant

    Here is the attachment showing the menu overlapping the slider on mobile

    Attachments:
    You must be logged in to view attached files.
    #1364863

    a096399
    Participant

    I just added a newer screenshot. I changed the slider design a bit. Looks like if you scroll down on the desktop website as well and scroll back up, the menu also hides part of the slider. Since I changed the Slider Revolution design, now on mobile the slider is automatically covered by the menu as well. No scrolling required for the overlap to happen.

    Thank you again!

    Adam

    #1365474

    Rad
    Moderator

    Hi there,

    Please try this,

    jQuery(document).ready( function( $ ){
      
    
    $('.x-navbar .x-nav li a').off('touchstart touchend click').on( 'click', function(e){
    
        e.preventDefault();
    
        var hash = $(this).attr('href').split("#").slice(-1)[0];
        var outbound = /^https?:\/\//i;
        var head_height = $(window).width() >= 979 ? 97 : $('header.masthead').height();
    
        if(hash && !outbound.test( $(this).attr('href') )) {
    	    
    	    $('html,body').stop().animate({
    	      scrollTop: $('#' + hash ).offset().top - head_height
    	    },700 ,'swing');
    	    $('.x-btn-navbar').click();
    	}
    
      } );
    
    } );

    Hope this helps.

    #1428862

    a096399
    Participant

    Hi Rad,

    I added this but unfortunately the mobile menu is still covering the slider when you scroll down on the website and then back to the top. I’m using Chrome on a Samsung Galaxy S7 if this helps any…

    Thank you all!

    Adam

    #1428878

    Christopher
    Moderator

    Hi there,

    Please add this block of code in customizer as well :

    @media (max-width: 979px){
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
        min-height: 100px;
    }
    }

    Hope it helps.

    #1428879

    a096399
    Participant

    PERFECT! Thank you all again so much! Greatest support team ever!

    Cheers,

    Adam

    #1428987

    Friech
    Moderator

    We’re delighted to assist you with this.

    Cheers!