Add dynamic Sitemap to footer

Question

I'm trying to create a footer menu/sitemap of sorts in Wordpress. (It's also worth a mention this is my fist attempt at anything Wordpress/PHP related.

Context:

We're making use of a template called Jupiter, which in turn makes used of a style of WYSIWYG editor to construct the layout

On the footer of the page, I'd like to add something to this effect. (This was our old footer)

The (my) requirement is that I make use of the Wordpress menu structure so that our marketing department can alter the footer as they need to eventually without any (trickier) changes (EG. via the menu GUI editor.)

I've managed to add the menu (via dragging it onto a footer widget), but there seems to be something that causing the newly created footer to act like an accordion. (EG. ul & li's are expanding and collapsing)

Hovering on the first menu node causes the accordion effect.

Questions:

1. Is this the best way of attempting to add a sitemap, or is the fact that I'm using a menu the reason why I'm struggling. If so whats the alternative? (Hard-coding is not going to happen).
2. My thinking so far is I need to add some JavaScript & CSS to try and nullify whatever is causing the collapse, and then attempt to style it. Where would be the best place to add said code?

(I don't have any code samples yet because I'm still investigating if this can be done via the admin portal at all)

Answer 1

You should call wp_nav_menu() in your footer.php template.

It's used as following :

 <?php wp_nav_menu( array('theme_location'=>'footer') ); ?>

The theme_location parameters refers to the checkboxes below the menu editor (Theme location). If your theme doesn't have enough theme_location, you can add some by adding

function register_html5_menu(){
     register_nav_menus(array( 
         'footer-1' => __('Footer Menu 1', 'theme_translation_domain'),
     ));
}

add_action('init', 'register_html5_menu');

in your functions.php

Otherwise you can call the menus directly by their names using the menu parameter :

<?php wp_nav_menu( array('menu'=>'menuname') ); ?>