• Resolved Hari Mohan Sharma

    (@hmsharma1234)


    I want to create a Footer Navigation Menu similar to the Top Navigation Menu.
    Can somebody provide me the php and CSS codes?

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First setup a Child Theme: https://codex.wordpress.org/Child_Themes

    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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”).

    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

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

    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer 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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer 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://wordpress.org/support/theme/twentyseventeen/#new-post

    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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
    }
    
    Thread Starter Hari Mohan Sharma

    (@hmsharma1234)

    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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to create a Footer Navigation menu like top menu’ is closed to new replies.