Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17130

    Hi,

    I need two menus on the top page here: http://www.delimbo.com/test/

    There´s any way or possibility to make works the secondary menu as the main menu? I Mean, I need the secondary also appears as a drop down when responsive design adapts to smaller screen sizes.

    Sorry for my poor English…. :-P

    Best,

    Nacho.

    #94297

    Hi,

    Please go to Appearance > Menus in the back-end and create as many menus as you want and assign whichever on you like best as your main menu on the same page.

    Thanks,

    Nick

    #94298

    I think that your not understanding me. I have the menu number 2 in this page top below the main menu:

    http://www.delimbo.com/test/

    The problem comes when i open the website in a mobile phone or tablet. The second menu disappears. I want to be showed as the main one. with a drop down menu for mobile and tablets.

    Best,

    Nacho.

    #94299

    Try following – open up js/avia.js and replace:

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    with:

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    // improves menu for mobile devices
    jQuery('.responsive .sub_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.sub_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    #94300

    Hi,

    I have made the changes in js/avia.js but drop down still does not appears. Any Ideas?

    Best,

    Nacho.

    #94301

    Hi,

    So you want the menu you brought up from the footer (there is a piece of it still left in the footer) – About, Contacto, Prensa, Alquiler de Espacio – to be the only navigation that tablets and mobile users see, in essence the primary navigation? It may be easier to just move everything that’s on top menu to the bottom one and from bottom to top one.

    Would you please try Dude’s code again, but first remove the code below from the footer:

    <div class='sub_menu'></div>

    and please delete your second menu in the header and in its place past the complete menu code

    <?php

    echo "<div class='sub_menu'>";
    $args = array('theme_location'=>'avia2', 'fallback_cb' => '', 'depth'=>1);
    wp_nav_menu($args);
    echo "</div>";

    ?>

    Thanks,

    Nick

    #94302

    Hi,

    All it´s done but seems that something still is not correct.

    This are my changes and code right now:

    header.php

    echo "<div class='main_menu' data-selectname='".__('Select a page','avia_framework')."'>";
    $args = array('theme_location'=>'avia', 'fallback_cb' => 'avia_fallback_menu');
    wp_nav_menu($args);
    echo "</div>";
    ?>
    <?php

    echo "<div class='sub_menu' data-selectname='".__('Select a page','avia_framework')."'>";
    $args = array('theme_location'=>'avia2', 'fallback_cb' => '', 'depth'=>1);
    wp_nav_menu($args);
    echo "</div>";

    ?>

    functions.php

    if(!function_exists('avia_nav_menus'))
    {
    function avia_nav_menus()
    {
    global $avia_config;

    add_theme_support('nav_menus');
    foreach($avia_config['nav_menus'] as $key => $value){ register_nav_menu($key, THEMENAME.' '.$value); }
    }

    $avia_config['nav_menus'] = array('avia' => 'Main Menu' , 'avia2' => 'Socket Menu (no drowpdowns)');
    avia_nav_menus(); //call the function immediatly to activate
    }

    avia.js

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    // improves menu for mobile devices
    jQuery('.responsive .sub_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.sub_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });


    As you can see the drop down menu still dont appears.

    #94303

    Hi,

    I just tried this myself for very begining and i got the second menu on top

    in functions php

    /*
    * Activate native wordpress navigation menu and register a menu location
    */
    if(!function_exists('avia_nav_menus'))
    {
    function avia_nav_menus()
    {
    global $avia_config;

    add_theme_support('nav_menus');
    foreach($avia_config['nav_menus'] as $key => $value){ register_nav_menu($key, THEMENAME.' '.$value); }
    }

    $avia_config['nav_menus'] = array('avia' => 'Main Menu' , 'avia2' => 'Socket Menu (no drowpdowns)');
    avia_nav_menus(); //call the function immediatly to activate
    }

    in header php

    <?php
    /*
    * display the theme logo by checking if the default logo was overwritten in the backend.
    * the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
    */
    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');

    /*
    * display the main navigation menu
    * check if a description for submenu items was added and change the menu class accordingly
    * modify the output in your wordpress admin backend at appearance->menus
    */

    echo "<div class='sub_menu' data-selectname='".__('Select a page','avia_framework')."'>";
    $args2 = array('theme_location'=>'avia2', 'fallback_cb' => 'avia_fallback_menu');
    wp_nav_menu($args2);
    echo "</div>";

    echo "<div class='main_menu' data-selectname='".__('Select a page','avia_framework')."'>";
    $args = array('theme_location'=>'avia', 'fallback_cb' => 'avia_fallback_menu');
    wp_nav_menu($args);
    echo "</div>";

    ?>

    Then in the backend you add the menu in the second slot and call it any name you want, and it displays. Then you can style it

    .sub_menu {
    margin: 90px;
    }

    and it will go below the main navigation menu.

    Thanks,

    Nick

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

The topic ‘Add a responsive menu’ is closed to new replies.