Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #727577

    I would like to add a second menu to the footer socket. I copied over the footer.php file to my child theme and added this code at the bottom just before the end of the socket container:

    <!– +++ place any extra stuff here to go after the socket line – adjust with css +++ –>

    <footer class=’container_wrap socket_color’ id=’socket’ <?php avia_markup_helper(array(‘context’ => ‘footer’)); ?>>
    <div class=’container’>

    <?php

    $avia_theme_location = ‘avia3’;
    $avia_menu_class = $avia_theme_location . ‘-menu’;

    $args = array(
    ‘theme_location’=>$avia_theme_location,
    ‘menu_id’ =>$avia_menu_class,
    ‘container_class’ =>$avia_menu_class,
    ‘fallback_cb’ => ”,
    ‘depth’=>1,
    ‘echo’ => false,
    ‘walker’ => new avia_responsive_mega_menu(array(‘megamenu’=>’disabled’))
    );

    $menu = wp_nav_menu($args);

    if($menu){
    echo “<nav class=’sub_menu_socket’ “.avia_markup_helper(array(‘context’ => ‘nav’, ‘echo’ => false)).”>”;
    echo $menu;
    echo “</nav>”;
    }
    ?>
    </div>

    <!– ####### END SOCKET CONTAINER ####### –>

    I need to be able to make this section access a different menu that I created named Socket 2 Menu. What do modify above to make it work?

    Thanks in advance.

    #728313

    Hey amerisource,

    Please add following code to Functions.php file of your child theme in Appearance > Editor

    add_action( 'init', 'register_my_new_menu' );
    function register_my_new_menu() {
      register_nav_menu('footer-second',__( 'Footer Second Menu' ));
    }

    and then add edit your footer.php file and add following code before Socket closing div

    
    <?php wp_nav_menu( array( 'theme_location' => 'footer-second', 'container_class' => 'my_extra_menu_class' ) ); ?>

    Best regards,
    Yigit

    • This reply was modified 4 years, 2 months ago by  Yigit.
    #729226

    Not what I was looking for. It gives me this:

    View post on imgur.com

    I am looking for a small menu under the first socket menu. I was able to replicate the socket menu below it, but can’t get it to change the links to my ‘Socket 2 Menu’. See here:

    View post on imgur.com

    Thanks.

    Nick

    #729684

    Hi Nick!

    You forgot to check “Footer Second Menu” under Menu Settings in Appearance > Menus. I checked it and then removed your duplicate menu, added some custom CSS to bottom of your style.css file and flushed cache in total cache. Please review your website now

    Best regards,
    Yigit

    #729708

    Thanks Yigit, but it still is not lining up correctly (see below). I tried changing the CSS, but there seems to be no effect, even if I comment it out. What am I doing wrong?

    View post on imgur.com

    Thanks.

    #729823

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #socket:nth-child(2) .container {
        padding-top: 0;
    }
    .my_extra_menu_class {
        float: right;
    }
    

    Best regards,
    Yigit

    #730017

    Thank you – that’s great, it moved the menu to the right side as needed. How would I close the gap between the two menus? I tried using a negative number in the padding for the top in both the #socket and the .my_extra_class_menu, but neither one moved the menus closer together.

    #730019

    Hi!

    Please try adding following code to Quick CSS as well

    #socket:nth-child(2) .container {
        margin-top: -10px;
    }

    Regards,
    Yigit

    #730541

    Great that worked with a few changes to the numbers – thanks so much.

    For everyone wondering about how to do this, here’s the code that I placed in the style.css sheet (or you could place in the Quick CSS area):

    /* == TO STYLE 2ND MENU IN FOOTER == */
    .my_extra_menu_class li {
    float: right;
    display: block;
    padding: 0 0 0 20px;
    border-left-style: solid;
    border-left-width: 1px;
    line-height: 10px;
    }

    #socket:nth-child(2) .container {
    margin-top: -50px;
    padding-bottom: 25px;
    }

    Add this to the functions.php file:

    add_action( ‘init’, ‘register_my_new_menu’ );
    function register_my_new_menu() {
    register_nav_menu(‘footer-second’,__( ‘Footer Second Menu’ ));
    }

    I added the menu I wanted and checked secondary footer menu. No need to change anything in the footer.php file.

    Thanks again Yigit.

    #730628

    Hi,

    Great, glad you got it working and thanks for sharing your solution! Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    #731817

    Please close this topic.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Add Second Menu to Footer Socket’ is closed to new replies.