|
#1
Jun 6, 2012, 07:00 AM
|
|
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
Jun 6, 2012, 08:18 AM
|
|
|
|
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
Jun 7, 2012, 06:57 AM
|
|
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
Jun 7, 2012, 07:03 AM
|
|
|
|
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
Jun 8, 2012, 07:23 AM
|
|
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
Jun 9, 2012, 01:43 AM
|
|
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
Jun 9, 2012, 05:52 AM
|
|
|
|
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
Jun 9, 2012, 08:07 AM
|
|
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
Jun 12, 2012, 06:31 AM
|
|
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
Jun 12, 2012, 06:42 AM
|
|
|
|
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
Jun 12, 2012, 12:58 PM
|
|
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
Jun 12, 2012, 02:45 PM
|
|
|
|
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
Jun 13, 2012, 12:08 AM
|
|
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
Jun 13, 2012, 04:05 AM
|
|
|
|
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
Jun 13, 2012, 01:22 PM
|
|
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
|
|