[Resolved] Adding a responsive secondary footer menu

Home Forums Support [Resolved] Adding a responsive secondary footer menu

Home Forums Support Adding a responsive secondary footer menu

Viewing 15 posts - 46 through 60 (of 61 total)
  • Author
    Posts
  • #142469
    Tom
    Lead Developer
    Lead Developer

    1. The FontAwesome arrow is used on mobile, but not desktop. It’s there, but only visible on desktop. The CSS I linked to will turn the desktop arrow upside down, which is what I thought you were hoping for?

    2. The CSS I linked to is different than what you just posted: https://generatepress.com/forums/topic/adding-a-responsive-secondary-footer-menu/page/2/#post-136799 – note the > arrows – those will fix this issue.

    3. In your HTML, change <nav id="site-navigation" to <nav id="tertiary-navigation" – that’s the ID the javascript is looking for.

    #142516
    Mo

    Hi Tom,
    Thanks for your patience in dealing with what has become much more of a problem riddled mod.

    Just clarify to the code being used, it’s in a GP Hooks now instead of the footer.php file so the code that you supplied in the beginning of this project isn’t relevant to the code in the GP Hooks. I used this method as it was recommended as the preferable alternative to the footer file in the child theme as anything in the child theme wouldn’t benefit from theme updates sent out.

    This is the GP Hook: GP Hooks – Tertiary Navigation instead of the footer.php file.

    ===

    1) Resolved.

    ===

    2) Haven’t found the correct syntax to get the “Support Tickets > My Tickets > Edit Billing Address” to line up with the arrow flyout. It needs to drop by about 40px to align with the arrow. So it’s back to pursuing the answer using the tried and true hit and miss strategy. However, your intervention is still most welcome.

    ===

    3) I don’t think the js is being called by the GP Hooks? This is the JS you provided: that’s located in a JS folder in the child theme.

    Thanks.

    #142526
    Mo

    Just occurred to me that #2 needs the use of a “>” somewhere in the syntax so that it’s only selecting the second flyout?

    #142587
    Mo

    Partial resolution of #2 now.

    The secondary flyout is aligned with the parent flyout.

    The flyout is downward instead of upward though.

    This is to accommodate a huge number menu links which will be added on a musician’s website project waiting in the wings.

    There could be at least 85 pages of musicians and bands that would need room to flyout, thus requiring the upward direction.

    ===

    #3 Fudge!, I forgot to include the link in the previous post to the JS in the child theme folder.
    It’s here:

    JS is beyond my abilities as I’m unable to grasp the language, try as I might, I can sometimes edit an existing snippet but that’s about it I’m afraid.

    Thanks.

    #142609
    Tom
    Lead Developer
    Lead Developer

    2. Try this CSS:

    .sf-menu ul ul {
        top: auto;
        bottom: 0;
    }

    3. In this code: http://pastebin.com/0WJSWgsc

    See the id=”site-navigation”?

    Change that to id=”tertiary-navigation” and see if it makes a difference πŸ™‚

    #142646
    Mo

    Hi Tom,
    #2 is resolved… Thank you.
    #3 no change.

    #142717
    Tom
    Lead Developer
    Lead Developer

    Hmm okay.. Find:

    <button class="menu-toggle..

    And replace it with:

    <button class="menu-toggle tertiary-menu-toggle..

    #142766
    Mo

    Hi Tom,
    Apologies for the time lag.
    Project HD is failing so it was a matter of making certain my backups were current and transferring everything to a new drive.
    At least there advanced warning.:)

    ===

    #3 is resolved.

    ===

    This sounds like a broken record, but I can’t thank you enough for dedicating your valuable time to this mod.
    Perhaps in the future it’ll help one of your other members.

    Until next time.
    Mo

    #142818
    Tom
    Lead Developer
    Lead Developer

    Glad I was able to help! πŸ™‚

    #144427
    Mo

    Hi Tom,
    Mistakenly thought the tertiary menu was a done deal.

    A couple of things pertaining to the mobile menu.

    1) When the mobile menu is toggled, the flyout is downward.

    This needs to be upward.

    I’ve been unsuccessful at adding the correct CSS.

    ===

    2) Mobile menu again. The parent link, In this case “Legal” disappears from view when the caret-up arrow is pressed.
    The sub-links fly out in the upward direction which is correct but the parent link I think shifts out of sight.

    Again another CSS issue.

    Thanks.

    #144719
    Tom
    Lead Developer
    Lead Developer

    In this case, it’s not possible for the sub-menu to appear up in the mobile menu without altering the HTML structure.

    So you would want to do this:

    @media (max-width: 768px) {
        .tertiary-navigation .menu > li > .sub-menu {
            top: 100%;
            bottom: auto;
        }
    }
    #144732
    Mo

    Hey tom,
    Thanks.

    I was trying the reverse…

    bottom: 100%;
    top: auto;

    Never dawned on me to try it your way… D’oh!

    Correct me if i'[m wrong interpreting what you’ve said…

    The footer menu won’t flyout because the footer widgets and content panels would have to shift out of the way thus destroying the layout in the grid system?

    ===

    The menu CSS has been a thorn.
    Don’t know why i’m grasping the other styling elements but not some of the menu selectors.

    I’ll keep plugging away and hope that there’s eventually a EUREKA moment.

    Thanks gain for your patience with this menu styling.

    #144736
    Tom
    Lead Developer
    Lead Developer

    It’s not so much about the grid, it’s about the sub-menu appearing above the parent item when it’s actually below it in the HTML structure.

    With the above CSS, it displays it below so the parent item is still visible.

    #144738
    Mo

    Thanks for clearing up the misconception.

    The “Legal” link does display correctly now when the sub-links flyout.

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