Can I Have Another Site Main Menu In The Footer?

Discussion in 'Woodpecker WordPress Business Theme' started by newcoatr, Aug 14, 2014.

  1. newcoatr

    newcoatr New Member

    Joined:
    Jul 9, 2014
    Messages:
    7
    Likes Received:
    0
    Hi,
    I believe this theme only supports one menu, is that so? I would like to have a menu the same as the main menu at the top, to be in the theme footer horizontally across the page (not vertically listed as the wordpress widgets do).

    Thanks in advance for any help.
     
  2. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    For making new Menus first you need to register a new menu location. Paste the following code in --> themes\woodpeckertheme\functions\inkthemes-functions.php file as show in screenshot. It will register a new menu location named 'Menu Footer', having a unique id 'custom_menu2'.
    Code:
    register_nav_menu('custom_menu2', "Menu Footer");
    Now you need to call this new menu from your desired location. To display footer menu to your desired location, paste the following code in --> themes\woodpeckertheme\footer.php file as show in screenshot.
    Code:
    <div class="col-md-24">
    <div class="footer-menu">
    <?php wp_nav_menu(array('theme_location' => 'custom_menu2', 'menu_class' => 'sf-menu', 'menu_id' => 'menu', 'fallback_cb' => 'woodpecker_nav_fallback')); ?>
    </div>
    </div>
    Now add some CSS to make it better using Custom CSS.
    Go to Appearance > Theme Options > Styling Options > Custom CSS
    And paste following code in Custom CSS and press Save All Changes button.
    Code:
    .sf-menu li a{
        color: #fff;
        display: inline-block;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
        padding-right: 20px;
        text-decoration: none;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }
    .sf-menu li a:hover{
        background: #476192;
        width: 100%;
    }
    .footer-menu{
    text-align:center;
    margin-top: 5px;
    border-top: 1px solid #121c2f;
    margin-bottom: 5px;
    border-bottom: 1px solid #121c2f;
    background: #121c2f;
    }
    .footer-menu .sf-menu {
    float: none;
    text-align: center;
    display: inline-block;
    }
    
    This will solve your issue.

    Thanks & Regards
    Yogesh Bhade
     

    Attached Files:

    • 0.png
      0.png
      File size:
      74.6 KB
      Views:
      3
    • 00.png
      00.png
      File size:
      77.8 KB
      Views:
      3

Share This Page