[Resolved] Adding a responsive secondary footer menu

[Tom]

Hi Mo,

Not too sure what you’re trying to do? Add a dropdown to the footer menu?

I’m not sure how that’s supposed to work as there’s no room for anything to drop down.

Let me know 🙂

[Mo]

Hi tom,
The footer menu is to be a “clone” of the header menu.

The header menu is only as an example to base the footer on.

In the footer menu, the “About Us” is the parent link.

The child “Placeholders 1, 2 & 3” should appear when the mouse hovers over the “About Us”

It never occurred to me that there’s a size constraint but that’s due to the thin footer?

If the drop-down expanded upward instead of downward, that could work.

Or… increase the height of the footer?

[Mo]

On the chance it might work, a margin of 100 px has been added above the footer.
No change in the footer menu.

[Tom]

There’s some kind of error happening which isn’t allowing the dropdown script to initiate.

Can you post the code you’re using for the third navigation to pastebin.com or something and post it here?

Thanks!

[Mo]

Just setting up an account on Pastebin…

I may have fudged the settings so let me know if you cant see the code.

I’ll post the code that’s been copied from the header menu.

Secondary has been changed to tertiary.

Here’s the paste:
http://pastebin.com/Bz6gz1e6

[Mo]

Don’t know if this is a clue…?

I was trying to correct the line height of the footer menu as it wasn’t displaying correctly.

It seems okay now when it’s expanded but after returning to the desktop mode, the “About Us’ link displays the “Placeholder 1, 2 & 3 although not enough padding at the top.(?)

Also the link divs are transparent but turn white during hover.

If the browser is refreshed, the “About Us” sub-menu disappears.

Thanks.

[Tom]

Is that the full code you added to the theme?

If so, you may want to add this instead: https://gist.github.com/generatepress/bc55ba4d42f7cc26e91c

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[Mo]

Sorry tom,
I should have given you the entire file content of footer.php.

It’s here: GP footer menu mod

This is located in the child theme.

===

Adding the code you’ve posted to the child functions.php broke the site.

There’s only one other code snippet in the child functions.php and it pointing to the path of the navigation.js file you kindly made for me earlier on.

Thanks

[Mo]

Something I’ve just tried.

All CSS code pertaining to the tertiary menu has been commented out.

As a result, the footer “About Us” link appears fully expanded.

Each CSS snippet is now being added back one by one to see the result.

===

Adding back the drop-down toggle: display none collapsed it as expected but now does not expand with a mouse hover.

[Tom]

The issue is that you’re adding in all of the HTML, which should be built by WordPress in order for the dropdown menu to work.

You can try removing this class from the <ul class="tertiary-menu.. element: sf-js-enabled

That class is supposed to be added by the script, and the script is failing because it’s been added for it.

[Mo]

That did it to a partial success.

If you hover over the “About Us” link the drop-down appears however the sub menu link divs are transparent with white lettering until hovered over then the divs turn white with red lettering as they should.
I’m assuming the padding is off as well.

I’ll see what I can do with the CSS.

===

There is one other CSS style I’m trying to apply but I’m stumped on is that I’ve been able to change all panels to rounded corners including the nav elements… EXCEPT for the sub-menu divs when they first expand.

On the main and secondary menus the sub-menu link divs are red and rectangular and the footer the sub-menu link divs are transparent.

What am I missing?

===

How difficult would it be to have the footer menu drop-down expand upwards?

Thanks again for your fantastic support and patience!

[Tom]

You would want to do something like this to make the sub nav go up:

.tertiary-menu .menu > li > .sub-menu {
    top: auto;
    bottom: 40px;
}

The other stuff is just CSS styling you’ll have to play around with in order to get it to look how you’re wanting 🙂

[Mo]

That bit of CSS did the trick!

Thanks for everything Tom.

[Tom]

You’re welcome 🙂

[Mo]

Hi Tom,
I’ve tried to make a small change to the footer menu again.
Unfortunately it’s met with failure.
I noticed after changing the dropdown menu to expand upward, that the font awesome arrow needed to be changed to a pointing up arrow.

Simple fix, or so I thought…

In the navigation.js file, all references to fa fa-caret-down have been changed to fa fa-caret-up.
In the footer.php file, all references to fa fa-caret-down have also been changed to fa fa-caret-up.

The arrows remain pointing down.

I could use your assistance again if you’d be so kind.

Thanks.

[Author]

Posts