Tagged: x
-
AuthorPosts
-
January 18, 2017 at 2:42 pm #1335604
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
January 18, 2017 at 2:43 pm #1335605This reply has been marked as private.January 18, 2017 at 3:10 pm #1335663Forgot one thing! How would I center the L&W logo within the mobile menu?
Thanks!
Adam
January 18, 2017 at 9:06 pm #1336122Hello 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.
January 18, 2017 at 9:55 pm #1336158Perfect!!! 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
January 19, 2017 at 12:57 am #1336285Hey 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!
February 9, 2017 at 3:27 pm #1364821Hi 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
February 9, 2017 at 3:30 pm #1364832Here is the attachment showing the menu overlapping the slider on mobile
February 9, 2017 at 3:46 pm #1364863I 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
February 9, 2017 at 11:38 pm #1365474Hi 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.
April 4, 2017 at 10:13 pm #1428862Hi 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
April 5, 2017 at 12:27 am #1428878Hi 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.
April 5, 2017 at 1:16 am #1428879PERFECT! Thank you all again so much! Greatest support team ever!
Cheers,
Adam
April 5, 2017 at 5:29 pm #1428987We’re delighted to assist you with this.
Cheers!
-
AuthorPosts