Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] GP 2.0 missing secondary navigation on mobile landscape

Home Forums Support GP 2.0 missing secondary navigation on mobile landscape

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #439666
    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

    GP Premium 1.5.5
    #439744
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #439768
    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.

    #439781
    Tom
    Lead Developer
    Lead Developer

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

    #439900
    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.

    #439912
    Enrico

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

    #440152
    Tom
    Lead Developer
    Lead Developer

    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).

    #440197
    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?

    #440219
    Tom
    Lead Developer
    Lead Developer

    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?

    #440232
    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.

    #440337
    Tom
    Lead Developer
    Lead Developer

    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";
        }
    }
    #440379
    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.

    #440596
    Tom
    Lead Developer
    Lead Developer

    Ah, I just adjusted the previous CSS so it should work better πŸ™‚

    #440643
    Enrico

    Just perfect! It is beautiful and clear like this πŸ˜‰

    Thanks a lot Tom!!

    #440645
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.