How to create a Footer Navigation menu like top menu

First setup a Child Theme: https://codex.www.ads-software.com/Child_Themes

Child theme already present. Please tell me PHP files to be modified as well as CSS code to be implemented.

Yes that’s the plan, otherwise you wouldn’t be able to implement this change.

In your Child Theme functions.php file add this code:

function register_my_menu() {
  register_nav_menu('footer-menu',__( 'Footer menu' ));
}

add_action( 'init', 'register_my_menu' );

Then go to Appearance > Menus in the dashboard and check whether you see your new menu there (named “Footer menu”).

This code did not work. New menu did not appear. Moreover, the complete code line started appearing on the top of the page.

My mistake. The code was not placed correctly. Footer Menu has appeared in the customizer.
Thanks for the support.

Great, are you okay with getting the footer menu to display on your website?

i placed code correctly and i do indeed get the option ‘footer menu’in the appearance – menus – menu settings. however when ticking the box and saving nothing is visible. any ideas?

Now create a ‘footer.php’ file inside your Child Theme folder and put all of this code into that file: https://pastebin.com/Yp0Sqfjp

Hi, Andrew!
I already had footer.php inside Child theme. I replaced it with the one you suggested.
Now, footer menu has appeared on my web pages.
Thanks for the support.

That’s great, glad to hear it’s working.

@djlest, If you need further support we should continue this discussion on your own thread about this. If you don’t have a thread already you can create one here: https://www.ads-software.com/support/theme/twentyseventeen/#new-post

Hi, Andrew!
I want to style the Footer Menu similar to Top Menu. Can you provide the code?
Currently, footer menu text is looking quite odd. You can check it on my website.

Regards

Try adding this to your “Additional CSS” section or Child Theme style.css file:

footer .menu {
    margin: 0;
}

footer .menu li {
    display: inline-block;
    overflow: hidden;
}

footer .menu a {
    padding: 1em 1.25em;
}

footer .menu a:focus,
footer .menu a:hover {
    text-decoration: underline
}

Thanks, this CSS code is working.

I tried all of the steps above with child theme and coded files as listed above. The child theme worked OK. However footer menu is displaying to the right of the site-info widget. I want the footer menu to be on a line below the site-info.

How do I get the footer menu to display on a separate line below the site info footer?

Thanks for you help