[Resolved] GP 2.0 missing secondary navigation on mobile landscape

[Enrico]

When you scroll down on landscape view, on Sticky Navigation the secondary navigation awesome symbol “fa fa-bars” is not displayed at the bottom of the menu.

On portrait view it is displayed correctly.

I am using GP 2.0 beta 2 and an Android 7.1 Smartphone, with full HD resolution.

The problem is the same on Chrome and Firefox for Android

[Tom]

Thanks! Just fixed this in GPP 1.5.6 which will be releasing in the next couple days.

For now, do this:

@media (max-width: 768px) {
    .slideout-desktop .main-navigation .main-nav li.slideout-toggle {
        display:none !important;
    }
}

[Enrico]

Hi Tom,
if this code is just a temporary fix for me thanks a lot.

If this code is the solution, there is a problem. With this CSS, the Sticky Navigation don’t show the “fa-bars” of the secondary menu in portrait and landscape.
So it is worst not better.

Now the site use your CSS, so you can see.

[Tom]

I’m not sure I understand. The secondary navigation looks normal to me: https://www.screencast.com/t/iToTezFMKJ6C

[Enrico]

Good, so we found two different problems 🙂

You don’t see what I have seen because you don’t scroll down the page to activare the sticky Navigation.

Now I removed your CSS code. When you scroll down on landscape view, on Sticky Navigation, after you click on the main menu, the secondary navigation awesome symbol “fa fa-bars” it is not displayed at the bottom of the menu. See here.

On portrait view the “fa fa-bars” it is displayed correctly. You can see it here

A third problem could be that the secondary navigation Menu name, in my case “Argomenti”, it is never displayed on Sticky Navigation. In my opinion it should be like this. I added the secondary menu name “Argomenti” to the Screenshot to make you understand what I mean.

This third point, if it is not a problem, it is a very good enhancement in my opinion.

[Enrico]

I have edited several time the previous post to eliminate all possible missunderstading and I have inserted 3 images.

[Tom]

Thanks!

The first issue: Your slideout menu is set to Desktop only, so the 3 bars shouldn’t show up on mobile at all. My original code fixes that.

As for the third issue – that’s never been GP functionality. However, you can force the slideout menu to display on mobile (as it currently is).

[Enrico]

For me your bug was a good feature 🙂

Anyway, now I have set the secondary menu in slideout mode both on desktop and mobile.

But on mobile the slideout menu for the sticky menu is the main menu only.

I would like the secondary menu like in the first bug or better like in my third “new feature”. Is it possible in some way?

[Tom]

To use your slideout menu as it was in the bug, you can do this:

@media (max-width: 768px) {
    .slideout-desktop .main-navigation .main-nav li.slideout-toggle {
        display:block !important;
    }
}

I’m not 100% clear on the new feature you’re suggesting?

[Enrico]

Thanks a lot Tom!

The new feature is the bug I like and the name of the secondary menu.

See the third image of the previous post.

[Tom]

Try making this your CSS:

@media (max-width: 768px) {
    .slideout-desktop .main-navigation .main-nav li.slideout-toggle {
        display:block !important;
    }

    .slideout-desktop .main-navigation .main-nav li.slideout-toggle a:after {
        content: "Argomenti";
    }
}

[Enrico]

Thanks a lot!
The secondary menu is in the primary menu like in desktop. This is very good since this way, on mobile, when you go on the stick menu, you have also the secondary menu like in the desktop.

The only problem I found with your last CSS is the name of the secondary menu that is dark grey and not aligned with the “fa-bars” of the menu.

You can see it in this image.

I have set again slideout only on desktop to make it work corretly. Because, if I use slideout mobile and desktop, on mobile, the main menu disappear. With slideout mobile and desktop, only the name of the primary navigation is displayed but it opens the secondary menu.

[Tom]

Ah, I just adjusted the previous CSS so it should work better 🙂

[Enrico]

Just perfect! It is beautiful and clear like this 😉

Thanks a lot Tom!!

[Tom]

You’re welcome! 🙂

[Author]

Posts