Support Forum - Topic: Add a responsive menu

Support Forum - Topic: Add a responsive menu http://www.kriesi.at/support/topic/add-a-responsive-menu-2 Support Forum - Topic: Add a responsive menu en-US Thu, 20 Jun 2013 07:29:27 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Nick on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-81153 Fri, 26 Oct 2012 10:18:40 +0000 Nick 81153@http://www.kriesi.at/support/ Hi, I just tried this myself for very begining and i got the second menu on top in functions php <pre><code>/* * 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 }</code></pre> in header php <pre><code><?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>"; ?></code></pre> 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 <pre><code>.sub_menu { margin: 90px; }</code></pre> and it will go below the main navigation menu. Thanks, Nick nachosn69 on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80731 Tue, 23 Oct 2012 12:13:03 +0000 nachosn69 80731@http://www.kriesi.at/support/ Hi, All it´s done but seems that something still is not correct. This are my changes and code right now: header.php <pre><code>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>"; ?></code></pre> functions.php <pre><code>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 }</code></pre> avia.js <pre><code>// 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 });</code></pre> --------- As you can see the drop down menu still dont appears. Nick on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80697 Tue, 23 Oct 2012 00:00:04 +0000 Nick 80697@http://www.kriesi.at/support/ 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: <pre><code><div class='sub_menu'></div></code></pre> and please delete your second menu in the header and in its place past the complete menu code <pre><code><?php echo "<div class='sub_menu'>"; $args = array('theme_location'=>'avia2', 'fallback_cb' => '', 'depth'=>1); wp_nav_menu($args); echo "</div>"; ?></code></pre> Thanks, Nick nachosn69 on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80610 Mon, 22 Oct 2012 08:34:41 +0000 nachosn69 80610@http://www.kriesi.at/support/ Hi, I have made the changes in js/avia.js but drop down still does not appears. Any Ideas? Best, Nacho. Dude on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80459 Sat, 20 Oct 2012 07:00:54 +0000 Dude 80459@http://www.kriesi.at/support/ Try following - open up js/avia.js and replace: <pre><code>// 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: '&nbsp;&nbsp;&nbsp;' //string for indenting nested items });</code></pre> with: <pre><code>// 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: '&nbsp;&nbsp;&nbsp;' //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: '&nbsp;&nbsp;&nbsp;' //string for indenting nested items });</code></pre> nachosn69 on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80332 Fri, 19 Oct 2012 09:05:10 +0000 nachosn69 80332@http://www.kriesi.at/support/ I think that your not understanding me. I have the menu number 2 in this page top below the main menu: <a href="http://www.delimbo.com/test/" rel="nofollow">http://www.delimbo.com/test/</a> 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. Nick on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80273 Thu, 18 Oct 2012 17:21:48 +0000 Nick 80273@http://www.kriesi.at/support/ 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 nachosn69 on "Add a responsive menu" http://www.kriesi.at/support/topic/add-a-responsive-menu-2#post-80106 Wed, 17 Oct 2012 17:06:09 +0000 nachosn69 80106@http://www.kriesi.at/support/ Hi, I need two menus on the top page here: <a href="http://www.delimbo.com/test/" rel="nofollow">http://www.delimbo.com/test/</a> 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.