Making Second Menu Responsive |
|
Hakan
|
On my site http://therioforum.com/gringo-rio I have succesfully created a second horizontal nav menu. After various attempts over the last few weeks I have still been unsuccessful in making it responsive and minimize to that button.
What I have tried is to make changes in the style.responsive.css, I guess I have to make changes elsewhere...
Anyone?
|
| |
Eileen
Artisteer Team
|
Hello,
I do not have such experience but Artisteer menu is set to responsive mode via JS code. You may check the script.responsive.js and try to repeat the same for custom menu.
It's just an idea.
|
| |
Hakan
|
Eileen, that worked like a dance. In that file (you only find it in file manager on your server right?) you just find the three instances with hmenu in it, copy them and replace hmenu with the name of your second menu.
|
| |
Panagiotis
|
@Hakan can you describe how you added the second horizontal menu??
Thanks in advance
|
| |
Hakan
|
OK:
Hi, so I have managed to create a second menu (with much help from Nikola) to my liking that I now can configure, I am sure there are better ways to go about this, and perhaps mistakes made by me. If that is the case just e mail me on hakan.almerfors|at|gmail.com HEADER.php and I can publish a corrected version. I have tried to make it very simple.
___________________________
First I created a menu of my liking (that I wanted to use as secondary) in Artisteer and uploaded the theme (without activating it).
______________________________
Then I copied the code in the HEADER.PHP between the <nav>-tags, then I pasted it in right under the first code and made some changes:
1) I changed 'menu' => 'primary-menu', to 'menu' => 'secondary-menu',
2) I changed <nav class="art-nav"> to <nav class="art-navv">
3) I change art-hmenu to art-smenu
The result looked like this:
<nav class="art-navv">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'secondary-menu',
'class' => 'art-smenu'
)
);
get_sidebar('nav');
?>
</nav>
_____________________________
Then, in the FUNCTIONS.PHP I copied register_nav_menus(array('primary-menu' => __('Primary Navigation', THEME_NS))); and pasted under replacing primary with secondary so it looked like this:
register_nav_menus(array('primary-menu' => __('Primary Navigation', THEME_NS)));
register_nav_menus(array('secondary-menu' => __('Secondary Navigation', THEME_NS)));
_______________________________
In the STYLE.CSS I made several changes. (Note that all changes made below except 1) you can add into the Artisteer theme with the function under export/options/css-options.)
1) To remove overlapping mega menu subitems I removed the z-index from the first menu (which was set to 499) in the art.nav so it looked like this:
z-index: ;
2) I opened the editor for theme I created with the desired navbar. Copied the art.nav section into the theme I would use. Then I changed the name to art.navv (now the secondary menu will call the instructions from this code).
3) I copied all sections with hmenu into Notes and replaced all mentions of hmenu with smenu. This I copied into the document (since I use the above mentioned export/options/css-options in Artisteer it ends up right at the bottom. Now the secondary menu also calls the info from here.
______________________________
Now In Wordpress, appearance/menus choose secondary as secondary navigation. You also have to add the items you want on that menu.
______________________________
From this moment you should have a functioning second menu. All the changes you need to do for design I either do in the art.navv or any of the smenu items. For instance the backround colour for the menu is in art.navv (I also removed the radiance in the end to a solid colour by changing it to:
.art-navv
{
background: #97B9BF;
border:1px dotted #9F9F9F;
border-left:none;
border-right:none;
margin:0 auto;
position: relative;
z-index: 499;
text-align: left;
height:34px;
}
The height of the nav bar you have in:
ul.art-smenu>li>a
{
padding:0 17px;
margin:0 auto;
position: relative;
display: block;
height: 24px;
cursor: pointer;
text-decoration: none;
color: #000000;
line-height: 24px;
text-align: center;
}
You should be able to tweak it all.
Hope it helps!
Hakan
PS The width of the mega menu subitems list I changed by adding this:
ul.art-smenu>li>ul {
width:159px!important;
}
FOR BUTTON MINIMIZE ON MENU: CHANGE IN FILE MANAGER ON YOUR HOST THE FILE script.responsive.js IN THE USED THEME. ADD THIS (THREE INSTANCES OF HMENU CHANGED TO SMENU in my case).
jQuery(window).bind("responsiveResize", (function ($) {
"use strict";
return function (event, responsiveDesign) {
responsiveAbsBg(responsiveDesign, $("nav.art-nav"), $("#art-smenu-bg"));
$(window).trigger("responsiveNav", { responsiveDesign: responsiveDesign });
};
})(jQuery));
jQuery(function($) {
$("<a href=\"#\" class=\"art-menu-btn\"><span></span><span></span><span></span></a>").insertBefore(".art-smenu").click(function(e) {
var menu = $(this).next();
if (menu.is(":visible")) {
menu.slideUp("fast", function() {
$(this).removeClass("visible").css("display", "");
});
} else {
menu.slideDown("fast", function() {
$(this).addClass("visible").css("display", "");
});
}
e.preventDefault();
});
});
jQuery(window).bind("responsiveNav", (function ($) {
/*global megaMenuCreate */
"use strict";
return function (event, options) {
if (options.isDesktopNav && $(".art-smenu-mega-menu").length > 0) {
megaMenuCreate();
}
};
})(jQuery));
Hope it works
|
| |
Hakan
|
Bad news about the button. I am creating a child theme, and now I can't get that button up and running again. Even though I think I have repeated all steps... If anyone could help?
|
| |
John Zeiger
|
To add a second horizontal menu, in Appearance > Menu, I created a new menu called Left and added the following code to a widget:
<?php wp_nav_menu( array( 'menu' => 'left', 'container_class' => 'art-nav desktop-nav', 'items_wrap' => '<ul class="art-hmenu">%3$s</ul>') ); ?>
|
| |
|
|