Second Horizontal Menu Instruction


Author Message
Hakan

Posted: 2/19/2014
Quote message 

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 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 with a changed name that corresponds do the code in the header.php (I picked art.navv right) 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 to style.css:

ul.art-smenu>li>ul {
width:159px!important;
}





 
Addition

Posted: 2/19/2014
Quote message 

I forgot, you can inspect the result here:

http://therioforum.com/gringo-rio

only a temporary address during creation.
 
Lee

Posted: 2/19/2014
Quote message 

This is my favorite "second menu" tutorials on the internet...
Thanks man :-)
 
Monty

Posted: 2/19/2014
Quote message 

I did this using the same suggestions above (great tutorial by the way).
I did it about a year ago.

www.dmnphoto.com
 
Jeremy

Posted: 4/3/2014
Quote message 

I have followed this tutorial very carefully and am still not getting the desired results. I created a menu that I like via a second artisteer theme and when activated it pulls in a completely different style. Would anyone be available for some help on this issue?

Website: http://affordablemarketingideas.com/tibbhomes/

What the nav should be looking like:

Any help would be much appreciated!!
 
Jeremy Mullens

Posted: 4/4/2014
Quote message 

:-D

Fixed it. If you're having styling issues with the menu, you most likely need to open up the second menu's theme and pull in some of the menu images to the main themes directory and rename them. I had to rename the menuitem.png, nav.png, and spacer.gif for it to look right - I renamed mine smenuitem.png, snav.png, and sspacer.gif and put them into the image folder of the main theme. From there I went into the style.css and changed the image names that they call for to the "s" images. Still had to adjust the location of the menu - but this worked like a charm!

Thanks!
 
Allan

Posted: 10/24/2014
Quote message 

Hi Guys,
This almost worked for me, but I have a slightly different layout. Menu in the header, (top of screen). Then the header image and I then want to add another menu below the header image.
Where can I add the code to get that effect.
 
Philip

Posted: 10/26/2014
Quote message 

I wanted to use alternate menus and used a different approach - which may be simpler for some. Artisteer theme and Primary where you want it. Secondary menus are created using the menu area on the wordpress site. The plug in Shortcode menu lets you create and format the menu. The menu is dropped into position using the shortcode. They can be horizontal and will format according to the bullet lists in the Artisteer theme. (if you plan to use the shortcode menu factor that into your thinking about how you format bullets. I am pretty sure you could change the formatting using css if you wanted to,