Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   how to create 2 page nav bars with different contents (http://forum.bytesforall.com/showthread.php?t=3707)

johullster Oct 3, 2009 03:14 AM

how to create 2 page nav bars with different contents

Is it possible to create 2 page nav bars each with different pages on? I have one directly under the header but want to create a separate one above the header.

I want each header to contain different pages - above the header for less significant pages.

Is this possible? if yes how do i go about making it happen? thanks



juggledad Oct 3, 2009 06:43 AM

I have yet to find a horizontal pages plugin that (a) allows you to use multiple copies and (b) merges with the themes CSS flawlessly.

With that in mind the easiest way I can think of is to do it manually:

1) create two new widget areas in the header like this in ATO->Style & Edit HEADER AREA->Configure Header Area
HTML Code:

%pages <?php bfa_widget_area('name=page_bar_1'); ?> %logo %bar1 %image %bar2 <?php bfa_widget_area('name=page_bar_2'); ?>
this will create:
a menubar
a widget area
the logo
the header image
second widget area

2) go to your site and view your home page - then view the source of the page, copy it and paste it to a text document

3) find the section starting with '<div id="menu1">' copy that section till you find it's matching '</div>' and paste this in a new text document. - You now have the code that makes up your menu. Make two copies and edit them so you have your two menus (i.e. edit the first copy so it has pages 1, 2, and 4 and then edit the second copy so it has pages 3, 5, and 6 - someting to that effect)

4) go to WP dashboard->Settings->Widgets and add a TEXT widget to both new widget. Copy the code for menu1 in to the first new widget area and save it. Copy teh code for menu2 into the second new widget area and save it.

5) go back to ATO->Style & Edit HEADER AREA->Configure Header Area and remove '%pages'

That should be it, you should now have two menubars and it will carry over on theme updates

HOWEVER - If you add a new page you will have to manually update the code to add it to the menubar you want it in. Same thing if you remove a page, you will have to remove it's corresponding code from the widget

gungo Jan 30, 2010 09:21 AM

Is there a way to do this and only have one menu within the header widget area?
I'd like to position the logo directly next to the menu instead of one above the other.

I'm thinking that I can:
1. create a header widget with two cells.
2. Put my logo into the left cell.
3. Put my menu bar in the right cell (using the 'copy html from source code menu 1 div.

I tried using the method you use here - and it was fine as long as I also had the %page-center in the header area.

Once I removed %page-center from the header area - it also killed the menu bar in the widget.

Is there a piece of code I could put in the widget to activate the %page-center as a widget item without also having it in the header area?


Divya Jul 7, 2010 11:16 AM

3) find the section starting with '<div id="menu1">' copy that section till you find it's matching '</div>' and paste this in a new text document. - You now have the code that makes up your menu. Make two copies and edit them so you have your two menus (i.e. edit the fires copy so it has pages 1, 2, and 4 and then edit the second copy so it has pages 3, 5, and 6 - someting to that effect)

- ----------

Hi Juggledad,
I am very new to wordpress and Im using 'Atahualpa' theme. I want to create 2nd page menu bar so I did exactly how you said .
- I first created a widget area "page_bar_1" and "page_bar_2" from step 1 .
- I then copied the code from the file "bfa_header_config.php " into a text file starting from
'<div id="menu1">' till echo '</ul></div>' .

Now I am confused about editing the code.I can not find any place where I can add my page Ids. Pls do help me with this.

Thanks in advance,
Diya :)

juggledad Jul 7, 2010 02:42 PM

Instep 3 you view the source of your page, not any of the atahualpa code. You are going to make a copy of what atahualpa generates for the menu and play with that.

Divya Jul 7, 2010 08:47 PM

Thanks a lot Juggledad , It Worked !!!..It Worked !!!
But menus don't look good though. It has a gray vertical bar before every menu item (like one in category field) . I also want to centre the menu bar like how we do it with %page-center and style fonts and color.

Please tell me how and where I need to style them. Sorry totally confused!!

Thanks for your help , I really appreciate it :)


PS: Tried uploading printscreen image here but i guess there is a bug .

juggledad Jul 8, 2010 05:47 AM

This is where you have to dig in and work. Since you are changing things, you have to do a lot more work.

If you want it to work like %pages-centered, did you have %pages-center when you first grabbed the menu code? If not you can do one of two things
1) look at the code to determine what is different and make that change in your code or
2) start over using %pages-center instead of %pages

Divya Jul 8, 2010 12:39 PM

Thanks Juggledad, It works fine now. I changed the pixel value of the width of horizontal bar. Added following code
to css.php

margin:0 auto;

#menu1 ul {
margin:0; padding:0;
text-align: center;
width: auto;

Also used some code in same file to style the fonts and color but vertical bar still persists.

Sorry I forgot to tell you about one more problem. There is some gap after each horizontal menu bar [ between menubar and the image and menubar and %bar2] . Do I need to change something in the html code that I added to the text widget ???
Here is the html code,

<div id="menu1"><ul id="rmenu2" class="clearfix rMenu-hor rMenu">

<li class="page_item current_page_item"><a href="http://diya-prod.ippacket.info/" title="Divya">Home</a></li>
<li class="page_item page-item-1729"><a href="http://diya-prod.ippacket.info/?page_id=1729" title="E-Mail">E-Mail</a></li>
<li class="page_item page-item-1727"><a href="http://diya-prod.ippacket.info/?page_id=1727" title="About ME">About ME</a></li>
<li class="page_item page-item-1695"><a href="http://diya-prod.ippacket.info/?page_id=1695" title="Glossary">Glossary</a></li>


how do I remove the gap??? :-?


Divya Jul 8, 2010 04:12 PM

Ha I fixed it.. Just have to adjust the padding/margin of logo and horizontal bars to reduce the gap. I guess gap was was created by the widget area.

Almost everything is fixed. Only prob is 'vertical bars' that appear before every 'Menu Item'. Anyways, Since menu bar is styled, it doesn't look bad.

Thanks for all you help Juggledady. I really really appreciate it :)

Both Menu bars look Gr8 !!!

jrobie23 Oct 18, 2011 04:54 PM

Juggledad, would this also be the best way to create subjective menus each of my pages?

Page 1: contains main nav, plus NAV2
Page 2: contains main nav, plus NAV3
etc. etc..

Essentially I want My main nav to be static, but I'd like the sub menus to change depending on what page the visitor is on.

jrobie23 Nov 9, 2011 02:10 PM

I used some of Juggledad's logic and got to this point:


Essentially it is an additional widget area with 5 different text widgets. Using widget logic, they are visible only on the pages (and child pages) of each respective link in the main nav.

This was a very simple solution, so thank you Juggledad!!! I basically copied the text from the main nav using "view source" and only used the "li"s that I wanted for each widget.

It is currently quite ugly, but I'm hoping to get it modified shortly so the main navs are nicer and the subs are more clearly visible.

Here is one of the widget codes (for "rent") if anyone is interested:

<ul id="rmenu2" class="clearfix rMenu-hor rMenu">
<li id="menu-item-181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-181"><a href="http://jacksonnhrealestate.com/rent/for-tenants"><span>For Tenants</span></a></li>
<li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://jacksonnhrealestate.com/rent/for-landlords"><span>For Landlords</span></a></li>
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://jacksonnhrealestate.com/rent/the-area"><span>The Area</span></a></li>

All times are GMT -6. The time now is 02:18 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.