Docs

[barneyibbotson]

I’m having issues with the mobile navigation menu in Ethos.

When viewing my site on mobile,I encounter the following problems:
1) One-page navigation works, but doesn’t scroll to the correct location on the page. It scrolls to a point below the intended location.
2) Sub-menus don’t work. When tapped, instead of the sub-menu expanding, the whole menu closes. The sub menu appears when you tap on the menu icon again. (For an example of this, see: new.flowskate.co.uk/flowshop

URL is new.flowskate.co.uk
WordPress 4.5.4 running X – Child Theme theme.
X version 4.6.1

[Nico]

Hi There,

Thanks for writing in.

First, please update your setup to the latest version.

https://community.theme.co/kb/updating-your-theme-and-plugins/

Then, Check for plugin conflict,

You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.

Thanks.

[barneyibbotson]

Hi Nico
Thanks for the reply.
I have updated my setup and I followed the steps that you recommended.
Unfortunately the problem still persists.
Regards,
Barney

[Jade]

HI Barney,

Please try to add this code in the Custom JS of the customizer:

jQuery ( function( $ ) {

$('.x-navbar .x-nav-wrap.mobile .x-nav > li > a').off('touchend touchstart click').on('click', function () {

$('.x-btn-navbar').trigger('click');

    var target = $(this);

    setTimeout( function() {

      $('html,body').animate({scrollTop: $( '#' + $(target).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height() },700 ,'swing');

    }, 300 );

} );

Hope this helps.

[barneyibbotson]

Thanks for this – it has half-solved my problem.
The submenus now function correctly. However, the main menu doesn’t collapse after tapping on the menu item, which means that on pages with one-page navigation enabled, the scrolling function moves to a point that is beyond its intended location, due to (I’m guessing) the extra height of the expanded menu.

Regards,
Barney

[Paul R]

Hi Barney,

Upon checking, I can see a syntax error in the console.

I checked your code and it’s kind of messed up.

http://screencast.com/t/HzgtZMYe

Please copy the code provided as it is.

Thanks

[barneyibbotson]

Hi
My mistake! The code was messed up – I’d copied it from the email I received rather than from this thread. I’ve replaced it now yet the problem still persists.

Barney

[Paul R]

Hi Barney,

It that case, please provide us your wordpress admin login in private reply.

Thanks

[barneyibbotson]

This reply has been marked as private.

[Jade]

HI Barney,

Please add this code in the custom CSS:

@media (max-width: 979px) {
    .masthead {
        position: fixed;
        top: 0;
        z-index: 9999;
        width: 100%;
    }
}

Hope this helps.

[barneyibbotson]

Hi – thanks for the reply.
This makes the one-page navigation scroll to the correct anchors, but the menu stays expanded and covers up the content. It also makes the top widgetbar menu disappear.
Regards,
Barney

[Jade]

Hi Barney,

There was a JS that was causing the issue. I went ahead and fixed it.

Kindly check.

[barneyibbotson]

Hi
The menu now closes itself after selecting, so that’s good. However I still have the following issues:

– The navigation still doesn’t go to the right location. It’s a few pixels below the anchor. I need it to scroll to the exact top of the div.
– The page doesn’t ‘scroll’ smoothly, it jumps.
– The widgetbar menu at the top is still missing.
– The main menu navbar becomes ‘detached’ from the logo bar when you scroll down the page.(There is a gap between the logo area and the navbar through which you can see the page content scrolling, underneath.)

Barney

[Rue Nel]

Hello Barney,

Thanks for updating in!

The logo and the navbar are separate and this is why they are detached when you scroll down tha page. If you want to include the logo as fixed in the navbar, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
    $('.x-logobar').prependTo( $('.x-navbar') );
  });
})(jQuery);

And then it’s a few pixels below the anchor because you only set 20 pixels for your navbar top height. Please go to the customizer, Appearance > Customize > Header > Navbar > Navbar Top Height (px) and set it at least 116 pixels.

Hope this helps.

[barneyibbotson]

Hi – thanks for the suggestions.
I’m afraid none of this is helping – it’s still a mess.

I still have the issue of the missing widgetbar menu at the very top, and none of the suggestions have worked.
Making the Navbar top height 116px means that I have an unnecessarily deep navbar on the desktop version, which is not what I want.
I’m not sure how to get the widgetbar back now, and the navbar still isn’t working.

I also have no way of getting back to my previous code because my code was altered. I would rather you tell me which code to change rather than you alter it, just so I know which lines have been changed.
I’m beginning to panic a bit now as my site has lost some of its functionality and I don’t know how to get it back.

[Author]

Posts