[Resolved] Adding a responsive secondary footer menu

[Tom]

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.

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

[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?

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

[Tom]

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 🙂

[Mo]

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

[Tom]

Hmm okay.. Find:

<button class="menu-toggle..

And replace it with:

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

[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

[Tom]

Glad I was able to help! 🙂

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

[Tom]

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;
    }
}

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

[Tom]

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.

[Mo]

Thanks for clearing up the misconception.

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

[Tom]

Perfect 🙂

[Author]

Posts