Docs

[Saso Oven]

Hi guys,

I am having problems with vinalisjak.si one page navigation menu (logo positioned on the left side, external gallery link and polylang multilanguage are making things a bit more complicated). Everything works fine on desktop but I still have few more issues to solve on mobile.

Things i did:
– to force navbar to stay fixed on mobile so the user is constantly exposed to a logo (clients demand) I used:

GLOBAL CSS
@media all and (max-width:979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right{
position:fixed!important;
}

– to force navbar to close after the link selected I used:

GLOBAL JAVASCRIPT
(function($){
$(‘.x-navbar .x-nav-wrap.mobile a’).on(‘touchend click’, function(){
$(‘.x-nav-wrap.mobile’).toggleClass(‘in’).css(‘height’, 0);
$(‘.x-btn-navbar’).toggleClass(‘collapsed’);
});
})(jQuery);

PROBLEMS (MOBILE ONLY):
1. when the user enters the page on mobile and touches the menu icon, the menu does not take the visible portion of the screen, it stays loaded under the entry slider. The user has to scroll down to see the opened menu.

2. once the user is exposed to menu content and touches a certain category (link) the menu stays open and hides the actual content. I tried to use Javascript code to automatically close the menu after selection, but navigation starts to behave really strange. Also the polylang links do not direct you to a different language page anymore. I had to remove the code.

3. i have 8 categories/links in navigation and there will be some more languages added soon, which means that the user should be able to scroll the menu to see all categories (especially in landscape mobile mode). Unfortunately when you try to scroll to the bottom of the menu you actually scroll the content behind the menu.

4. when you scroll the page on mobile it has a tendency to skip vertically a bit. It doesn’t matter if I use static or fixed navigation (CSS). It’s just a bit annoying, it doesn’t present real functionality problem.

I would really appreciate any help regarding these issues.

Thank you.

[Saso Oven]

This reply has been marked as private.

[Lely]

Hi Saso,

Thank you for the credentials and detailed description of the issue.

1.) Please try adding the following CSS to make sure that the menu is always fixed on top on mobile:

@media all and (max-width:979px){
.x-navbar-fixed-top-active .x-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
}

2.) Please note that when the menu is fixed, it is meant to cover the content. It is how fixed work by default. To close the menu, please try this code instead:https://community.theme.co/forums/topic/mobile-menu-do-not-close-after-selection-menu-link/#post-773661

3.) Fixed menu will be on top of all your content. It’s height is limited to your browser height. It is not recommended to use fixed menu when using longer menu. If you insist, you can try adding this custom CSS:

@media (max-width: 979px){
.x-nav-wrap.mobile.collapse.in {
    max-height: 300px;
    overflow-y: scroll;
}
}

4.) Can you give us video screencast of the issue?

Hope this helps.

[Saso Oven]

Hi guys,

thank you for quick a very response.
I will try suggested solutions and let you know the outcome on Monday. I will also provide you with video attachments of the site in mobile view (android & ios).

Regards.

[Saso Oven]

Hi,

Menu fixed on top is an ok solution.
However the provided code added to global Javascript does not automatically close navigation after selection:

jQuery(document).ready(function($){
$(‘.menu-item a’).click(function(){
$(‘.x-nav-wrap.mobile’).removeClass(‘in’);
});
});

Also menu scroll CSS does not function. It does limit the height of the menu to 300px and hides some navigation categories though, but you it still scrolls the main content only.

@media (max-width: 979px){
.x-nav-wrap.mobile.collapse.in {
max-height: 300px;
overflow-y: scroll;
}

Thanks

[Jade]

Hi there,

Please try this code:

  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

Hope this helps.

[Saso Oven]

Hi there,

unfortunately it doesn’t work :/ The menu stays open and you can see the scroll bar & content moving behind when you select certain category. You have to touch the menu icon again in order to close the menu.

Any other solutions?

[Paul R]

Hi,

Please try this code intstead.

jQuery(function($) {
  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });
});

Hope that helps.

[Saso Oven]

Hi guys,

this code closes the menu successfully and the one page navigation works ok on mobile but i am having problems with Polylang redirection again. If i try an hold my finger on a language category a bit longer the redirection usually works, but if i just touch it (like other categories) there is usually no redirection.
It seems like the menu now closes too fast for a Polylang to be able to switch to another language everytime.

When i try to minimize a window on a desktop to get a mobile view of the page everything works flawlessly with a mouse click. If i don’t use the code to close the menu automatically Polylang also works without problems.

Any ideas?

[Paul R]

Hi,

Let’s try adding a delay.

Kindly change the code to this.

jQuery(function($) {
  $('.mobile .x-nav a').on('touchend click', function(){
setTimeout(function(){
    $('.x-btn-navbar').click();
},500);
  });
});

If that doesn’t help, please provide wordpress admin login in private reply.

Thanks

[Saso Oven]

Hi Paul,

the delay solved the issue. Thank you for great support, I really appreciate it.

Now the final navigation problem.
When viewing the page on mobile (especially landscape view), the menu is not completely visible (because of screen/browser height limit & number of menu categories). I would like to provide a user with all navigation categories but I don’t know how else to achieve that other than with scroll-able menu.

I tried the CSS below which only limits the height of the menu to 300px. overflow-y: scroll; doesn’t work.
I’m not sure I even need to limit the height or width of the menu. The menu can cover the screen completely because now the it automatically closes after category selection.

When the menu is open the scroll should apply to the menu not the content behind. After the user selects the category the menu closes and redirects to selected content.

Here is the code posted earlier:

@media (max-width: 979px){
.x-nav-wrap.mobile.collapse.in {
max-height: 300px;
overflow-y: scroll;
}
}

[Jade]

Hi Saso,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
    .x-navbar-fixed-top-active .x-navbar {
        max-height: 300px;
    }
}

Then you can remove this code:

.x-nav-wrap.mobile.collapse.in {
    max-width: 100px;
    overflow: scroll;
}

Hope this helps.

[Saso Oven]

Hi,

I removed my part of CSS and tried the upper code nothing changed, so I tweaked my existing code a bit and added max-height to it.

@media all and (max-width:979px){
.x-navbar-fixed-top-active .x-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
overflow-y: scroll;
}
}

The code does exactly what I am after, but not every time. Once you select a category and then try to open the menu and scroll the menu once more, it scrolls the content in the back again. If you try this few times, with a finger on different parts of the mobile screen the menu scroll sometimes works again.

If I try it on desktop with minimized window (mobile) everything works flawlessly.

[Paul R]

Hi,

Try setting a fix min height and add a z-index to your code.

eg.

@media all and (max-width:979px){
.x-navbar-fixed-top-active .x-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-height: 400px;
overflow-y: scroll;
z-index:999999;
}
}

Hope that helps.

[Saso Oven]

Hi Paul,

unfortunately the problem persists. z-index doesn’t work.
I used max-height:100% to completely cover the screen hoping the scroll would only apply to top active screen e.g. opened menu. Somehow it still likes to scroll the content behind rather than the menu.

Limiting the height to 400px makes the scrolling problem (menu vs content) a bit more obvious and easier to understand, but it doesn’t solve anything.

I tried to remove the code that forces the menu to close after category selection but it also changes nothing. This part (automatic close) works very nice though.

[Author]

Posts