Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

how to create 2 page nav bars with different contents


  #1  
Old Oct 3, 2009, 02:14 AM
johullster
 
17 posts · Sep 2009
Brighton, UK
Hello

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

Jo

www.reflexologyinbrighton.com
  #2  
Old Oct 3, 2009, 05:43 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
bar1
the header image
bar2
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jul 8, 2010 at 04:42 AM.
  #3  
Old Jan 30, 2010, 08:21 AM
gungo
 
31 posts · Jul 2009
San Juan, Puerto Rico
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?

Thanks,
Richard
  #4  
Old Jul 7, 2010, 10:16 AM
Divya
 
9 posts · Jul 2010
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

Last edited by Divya; Jul 8, 2010 at 11:49 AM.
  #5  
Old Jul 7, 2010, 01:42 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jul 7, 2010, 07:47 PM
Divya
 
9 posts · Jul 2010
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

Diya


PS: Tried uploading printscreen image here but i guess there is a bug .
  #7  
Old Jul 8, 2010, 04:47 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jul 8, 2010, 11:39 AM
Divya
 
9 posts · Jul 2010
Thanks Juggledad, It works fine now. I changed the pixel value of the width of horizontal bar. Added following code
to css.php

#menu1{
margin:0 auto;
text-align:center;
width:900px;
}

#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>

</ul></div>


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

Thanks,
Diya

Last edited by Divya; Jul 8, 2010 at 11:51 AM.
  #9  
Old Jul 8, 2010, 03:12 PM
Divya
 
9 posts · Jul 2010
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 !!!
  #10  
Old Oct 18, 2011, 03:54 PM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
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.
  #11  
Old Nov 9, 2011, 01:10 PM
jrobie23's Avatar
jrobie23
 
63 posts · Feb 2011
Boulder, CO
I used some of Juggledad's logic and got to this point:

http://jacksonnhrealestate.com/buy

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>
</ul>

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Contents have moved to the left side maksev Sidebars & Widgets 5 Aug 24, 2009 10:05 PM
[SOLVED] Remove Top Nav Bar tarragon Sidebars & Widgets 4 Aug 22, 2009 09:45 PM
Page Nav dropdowns appear behind sidebar SWD Page & Category Menu Bars 4 Jul 20, 2009 01:31 AM
Hackdalic's Table Of Contents Box Plugin -- is a Yes! fromtheranks Plugins & Atahualpa 2 Jun 29, 2009 04:49 PM
Skip Nav: Where do I send the focus to? bcorrigan Atahualpa 3 Wordpress theme 2 Apr 9, 2009 09:44 AM


All times are GMT -6. The time now is 08:20 PM.


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