Docs

[koosang153]

I am using ethos theme for navigation bar and when I try to click menu word on navigation bar on mobile, the entire box that contains word for each menu is supposed to be clickable and linking function, but only the ⤋ arrow and word itself is clickable not the space inbetween inside the same box..
if you know what I mean…

so that bothers my client and asking me why navigation bar button is not working.

How can I fix this issue? Can I make entire each box(as one whole box) to be clickable?

I tried to insert

jQuery(function($){
$(‘.x-navbar .mobile .x-nav li.menu-item-has-children>a’).on(‘click’, function(e) {
e.preventDefault();
var sub_toggle = $(this).find(‘.x-sub-toggle’),
sub_menu = sub_toggle.attr(‘data-target’);
sub_toggle.toggleClass(“x-active”).closest(‘li’).toggleClass(“x-active”);
$(sub_menu).slideToggle().toggleClass(‘in’);
});
});

but, this code didn’t work…
Please help!
My site is http://www.naver.design

Thank you!

[Rad]

Hi there,

Thanks for posting in.

Please try replacing that code with this

jQuery( function($) {

$('.x-nav-wrap.mobile .x-sub-toggle').off('touchstart touchend')
.on('click', function(e){ e.stopPropagation(); } )
.parent().off('touchstart touchend').on( function(e){ e.preventDefault(); $(this).find('.x-sub-toggle').click(); });

});

Then please provide the login credentials if this won’t work, as I may need to remove the faulty script.

Thanks!

[koosang153]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-sub-toggle {
    width: 100%;
    text-align: right;
    margin-right: 23px;
}

Hope that helps.

[koosang153]

Hi,

I don’t know why..but now, when I see it from mobile, the logo is cut off to the side.

[Christopher]

Hi there,

I don’t see issue with logo, please see the attachment.

Please clear cache and check again and if you need further assist, provide us with some screen shots.

Thanks.

[koosang153]

This is after I insert the code, and cleared the cache.
From real mobile view, it still looks like this….

And still menu is not set as how I wanted.
While each menu box is clickable, some blank menu with # gets refreshed when it’s touched.
It should just be dropped down for lower menus, shouldn’t refresh the site.

[Christopher]

Hi there,

Please move following code from Customize -> Global CSS to Customize -> Global JavaScript:

jQuery( function($) {

$('.x-nav-wrap.mobile .x-sub-toggle').off('touchstart touchend')
.on('click', function(e){ e.stopPropagation(); } )
.parent().off('touchstart touchend').on( function(e){ e.preventDefault(); $(this).find('.x-sub-toggle').click(); });

});

If it doesn’t help, insert the code I provided in previous replay under Customize -> Global CSS.

Hope it helps.

[Author]

Posts