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 »

[SOLVED] Some trouble styling 2 page nav bars


  #1  
Old Jun 6, 2012, 07:00 AM
clchleung
 
18 posts · Nov 2011
Hello all,

I've searched a couple of the forum topics in order to figure out how I'm going to make my client happy and add not one, but two of the menu nav bars horizontally with the header logo and images. I found this wonderful answer on "how to create 2 page nav bars with different contents" answer and found a great solution to my question! However, I tried many times and couldn't figure out how to remove the light blue block lines on my modified menu navs with inserting css and also make the submenu's or children not have the block lines in them and the links in these also have inadequate padding. Here's a link to the development site:

http://www.swwtwater.org/wordpress/

Additionally, I wanted to let you know that I instructed the css to detect the new widget div.

By the way, I made a donation to your great theme and would really appreciate any and all help that you can give. Plus, my client is loving the look so far!

With gratitude and hope,
Chris
  #2  
Old Jun 6, 2012, 08:18 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what do you have set at ato->MENU 1 (Page Menu)->Border around all menu items?
__________________
"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; Jun 12, 2012 at 06:40 AM.
  #3  
Old Jun 7, 2012, 06:57 AM
clchleung
 
18 posts · Nov 2011
Hi juggledad,

I have the ato -Menu 1 (Page Menu) - Border around all menu items set at:

solid 1px #81DAF5

What is the next step(s)?

Thank you for the reply,
Chris
  #4  
Old Jun 7, 2012, 07:03 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
that is what is causing the borders - change it to
solid 1px #FFFFFF
and the blue will become white and you won't see it

for the new widget div eithor look at the source of the page to find it or use the firebug extension in firefox
__________________
"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; Jun 8, 2012 at 07:27 AM.
  #5  
Old Jun 8, 2012, 07:23 AM
clchleung
 
18 posts · Nov 2011
Hi juggledad,

Thank you for the suggestion; I would have never looked in there to change things! I'll give it a try sometime tonight and let you know what happens!

I hope this works -
Chris
  #6  
Old Jun 9, 2012, 01:43 AM
clchleung
 
18 posts · Nov 2011
Juggledad:

Yes! Looks like your suggestion of changing the border on all menu items to the #FFFFFF worked! However, I'm in the process of now styling the menus to how I want them to look like exactly before. I played and used firefox to determine the two page ids, I believe, are for the new widget menus I created. Here's the css so far placed in css inserts option:

#page_bar_1{
border: solid 1px #81DAF5 !important;
background: #<?php echo $bfa_ata['page_menu_bar_background_color']; ?>;
padding: 5px;
margin: 0 auto;
}

But it only creates a border on the menu bar and not each individual menu and submenu items. Addtionally, the background only spans across the titles and not the whole menu box - leaving too much white space when the user's mouse goes over the menu. I want this border color on all menu items and for the background to actually encompass each one. What else can I try? Please advise.

Thank you very much for your help in advance!
Chris
  #7  
Old Jun 9, 2012, 05:52 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
#page_bar_1{
border: solid 1px #81DAF5 !important;
background: #<?php echo $bfa_ata['page_menu_bar_background_color']; ?>;
padding: 5px;
margin: 0 auto;
}
1) you can't use PHP in a CSS Insert it will not be evaluated
2) there is other CSS that is applied to the indivisual menu items and takes precidence over this

use the FireBug extension of Firefox to examine the items so you can see the css applied
__________________
"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 lmilesw; Jun 9, 2012 at 12:16 PM.
  #8  
Old Jun 9, 2012, 08:07 AM
clchleung
 
18 posts · Nov 2011
Hello juggledad,

1.) I didn't know that php functions in css inserts won't work. I will probably remove that then.
2.) I haven't had the chance to use Firefox firebug extension, but if you highly suggest it, I will download it onto my computer (I don't have it yet) and see what else I can figure out.

By the way, when I was studying the css.php file, I noticed many menu css stylings - do you know if this would be something I would have to take into consideration when modifying the code in order to style my nav bars?

Thanks again for your help!
Chris
  #9  
Old Jun 12, 2012, 06:31 AM
clchleung
 
18 posts · Nov 2011
Alright, so after quite a bit of work and monkeying around with firebug, I've managed to get the menu colors right and the spacing between menu items have a margin of zero! This is exactly what I want.

However, I'm beating my head a little on how to get the active menu item to not have only the text be hovered but the particular menu and submenu item change color upon hover. I've tried adding and taking out declarations but it seems like I can't get it.

Could someone please help me out with this?

Here's some of the code I have in the css inserts so far:
div#menu1 ul.rMenu-hor li.rMenu-expand a {
background-image: url("http://leunggraphics.hohoschineserestaurant.com/anotherone/wp-content/themes/atahualpa/images/expand-down-white.gif");
background-position: 100% 50%;
background-repeat: no-repeat !important;
padding-left: 5px;
padding-right: 15px !important;
}
div#menu1 ul.rMenu li {
border: 1px solid #81DAF5;
background: #fff;
}
div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover, div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active {
color: #000000;
font: 14px Arial,sans-serif;
margin: auto;
text-decoration: none;
text-transform: none;
}

div#menu1 ul.rMenu li {
margin: 0;
}

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
background-color: #E0F8F1 !important;
color: #088A08;
}

div#menu1 ul.rMenu li.current-menu-item > a:link, div#menu1 ul.rMenu li.current-menu-item > a:active, div#menu1 ul.rMenu li.current-menu-item > a:hover, div#menu1 ul.rMenu li.current-menu-item > a:visited, div#menu1 ul.rMenu li.current_page_item > a:link, div#menu1 ul.rMenu li.current_page_item > a:active, div#menu1 ul.rMenu li.current_page_item > a:hover, div#menu1 ul.rMenu li.current_page_item > a:visited {
background-color: #E0F8F1 !important;
color: #088A08;
}

Suggestions and help would be great!
Thanks,
Chris
  #10  
Old Jun 12, 2012, 06:42 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Did you know ou can add %pages twice to the 'Configure Header area' option

export your current settings for a bakcup, then change the configure header area optio to have
%logo %bar1 %pages %image %pages %bar1
and see how it works - that old post was from a few years back....

btw why are you putting the same menu above and below the image? In my mind, it doesn't look professional
__________________
"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; Jun 12, 2012 at 09:33 AM.
  #11  
Old Jun 12, 2012, 12:58 PM
clchleung
 
18 posts · Nov 2011
Hi Juggledad,

Yes, I am aware that I can add %pages twice through the Atahualpa theme options. However, my client would like to have the two page nav menus be different. She wants the bottom menu to have the most links and the top one to have four - five links. She hasn't determined yet what different pages she needs for the top menu. That is why you see two of the same menu.

Is it possible, through the options, to create one menu for the top and then create another menu for the bottom? I haven't tried that yet. What you see now is a widget that was made to be a page menu that I found a tip on for another forum question here.

Any additional advice would be appreciated.
Thank you!
Chris
  #12  
Old Jun 12, 2012, 02:45 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Why not create two Wordpress custom menus. Put the first in 'theme location' menu 1 which corrosponds with %pages, and the other in 'theme location' menu 2 which is %cats
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Jun 13, 2012, 12:08 AM
clchleung
 
18 posts · Nov 2011
Hello juggledad,

I tried your great suggestion and it, unfortunately, didn't work as I intended it to. When I placed the %cats in the header options like you suggested, I noticed that the dummy menu I set up in Menu 2 did show up; however, some of the menu items had submenu items and none of it was a drop-down menu. The only thing it did was display all menu items (regardless if it was a parent with children.)

So, for tonight, I've changed it back to only show %pages. But the funny thing is that the theme or code somehow dropped my light blue border (ie solid 1px #81DAF5) that I did set up originally in the Atahualpa menu 1 theme options. I made sure I removed all the widget menu styles from css inserts.

Let me know of anything else and thanks! I'll keep you posted if I find out some other things.
Chris
  #14  
Old Jun 13, 2012, 04:05 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
When you create a wp menu, you have TOTAL control of what shows where. To make a sub menu item you drag it tothe right of the parent item. This means if you added pane B as a sub page of page A in the menu you could reverse this ny dragging item A under and to the right of B
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Jun 13, 2012, 01:22 PM
clchleung
 
18 posts · Nov 2011
Wow, thank you for the GREAT advice! I wasn't aware at all that WP menus can be worked like that! I have never tried making a submenu item by slightly dragging the submenu item underneath the menu item. This method is easier than creating a completely custom menu widget and styling it manually, but I learned something along the way. It worked great and I thank you for all the help!

Best regards,
Chris

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Trouble with Single Post Page mommiedaze Center area post/pages 2 Jul 21, 2010 06:22 PM
[SOLVED] Having trouble styling pages - keeping consistency with the main page Volfan996 Atahualpa 3 Wordpress theme 8 Jul 20, 2010 08:00 AM
Trouble Adding External Link on Page Menu chrisp Page & Category Menu Bars 1 Jul 13, 2010 12:36 PM
Trouble styling calendar plugin--ATA over-riding CSS? paulae Plugins & Atahualpa 7 Jul 18, 2009 05:44 PM


All times are GMT -6. The time now is 10:46 AM.


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