Add a responsive menu « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Eunoia

Add a responsive menu

8 posts from 3 voices

Started 7 months ago by nachosn69
Latest reply from Nick
This topic is not a support question

Tags:

nachosn69
Member

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.

Posted 7 months ago #
Nick
Moderator

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

Posted 7 months ago #
nachosn69
Member

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.

Posted 7 months ago #

Dude
Dude

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: '&nbsp;&nbsp;&nbsp;'  							//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: '&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
	});

Posted 7 months ago #

nachosn69
Member

Hi,

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

Best,

Nacho.

Posted 7 months ago #
Nick
Moderator
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
Posted 7 months ago #

nachosn69
Member

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.

Posted 7 months ago #

Nick
Moderator

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