Jump to content

- - - - -

Adding A Second Menu In The Primary Website Navigation Bar


This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 edrubins



  • Members
  • 15 posts

Posted 02 December 2012 - 10:31 PM

I'm trying to theme a WP E-commerce site with Pagelines Framework. In the primary navigation bar I'd like to have two menus - one to the left with links to static pages and one to the right with links to the product categories. There are two approaches that I can think of.


1. Add two custom menus to the navbar and float one left and the other right.


2. Put all links in one menu and style the navbar so that the product category links are displayed on the right side of the bar. This would require that the id for each <li> tag in the menu remain constant as items are added or removed from the menu.


 Is it possible to add a second menu to the primary navbar? Do the id's remain constant, or will I have redo the stylesheet every time the menu changes? Is there another approach that would accomplish this?


TIA - Ed


#2 Rob


    One Smart Egg

  • Members
  • 13575 posts

Posted 02 December 2012 - 10:59 PM

It's not actually possible to add two menus to the Navbar or Nav Classic. 


That said, if you go to Dashboard > Appearance > Menus and click Screen Options on the top, right side, you'll see a check box option for CSS Classes.  Check it, then close Screen Options by clicking that again.


Now edit or create your custom links, page links, etc., but you'll see a CSS Class option in the edit fields.  Create a unique term for your left and right side menu items. Something like myleftmenuitems1, myleftmenuitems2 and myrightmenuitems1, etc.  Save the menu.


Then you will need to write some simple CSS to align and position each.  You'd float the one's marked left to the left, and float:right with the others. You may need to write exact positioning for the individual menu items in CSS. 


In the middle, between the two groups, you can add a menu item using #  as the link and in the label, place a transparent, small image. That will create a transparent break between them.

#3 edrubins



  • Members
  • 15 posts

Posted 04 December 2012 - 05:18 PM

Rob: Sorry I haven't had a chance to try your suggestion, but I've tied up with some issues in doing customs themes for WP E-commerce (the issues do not seems to involve Pagelines.) As soon as I get those squared away I'll get back to this.


Thanks again, Ed

#4 catrina



  • Members
  • 12345 posts

Posted 04 December 2012 - 05:39 PM

Ok, no worries.