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)
-   -   [SOLVED] Styling submenus different from menu bar (http://forum.bytesforall.com/showthread.php?t=7044)

emanuel1969 May 10, 2010 01:56 AM

[SOLVED] Styling submenus different from menu bar
 
Ack. I've spent an hour pouring through posts to try to style my sub-menus, and I can't figure it out. For example, I want my background color for the sub menus to be different than the menu bar (Or possible even a background image in the sub menus). What if I want borders around the menu items in the sub menu but not the menu bar, or vice versa? The font size smaller in the sub menus, the link colors, etc.

What's the starting code to put into my css inserts????

Thanks!

juggledad May 10, 2010 05:21 AM

see if this helps - http://forum.bytesforall.com/showthread.php?t=7045

emanuel1969 May 10, 2010 11:59 AM

That didn't help JD. I know about those inserts to style the menu bar. My issue is that they style both the parent menu bar and the drop-down children menus. What I want to do is style the children/drop down menus *only*.

Here's the site I am working on. Notice how awful the drop-down menus look:

http://myasha.org/tempasha/

Emanuel

lmilesw May 10, 2010 12:32 PM

I know this isn't what you want to do but how about using a darker version of your menu bar background color for "Background Color: Hover" and "Background Color: Parent"? Something along the lines of #FD8604.

emanuel1969 May 10, 2010 12:39 PM

Yeah not at all what I want to do. I like the parent menu bar as-is. I want to radically change the drop-down menus.

lmilesw May 10, 2010 01:02 PM

This might be a place to start of course changing the colors as needed.
HTML Code:

li.rMenu-expand li a {
background-color:#FDA94D !important;
}
li.rMenu-expand li a:hover {
background-color:blue !important;
}


emanuel1969 May 10, 2010 01:27 PM

That's exactly what I needed. Don't mark this thread as solved quite yet. Let me do some work and then post another reply. But that's what I was looking for to get started. Thanks!

emanuel1969 May 10, 2010 01:58 PM

Ok I am almost there. Check out the sub-menus now:

http://myasha.org/tempasha/

There are only two remaining problems. One seems like a bug. Basically, the drop-down menus are offset to the right about 10px. This is fine, except it puts a white stripe down the left side of the drop-down menu. Go look. I either want this stripe to be transparent or else I want to get rid of the off-set so it's not there.

Lastly, I want to turn off the hover properties for the first-level parent item. Since I have these links turned off, I don't want the text to change color when someone hovers over them and the drop-down appears.

How can I accomplish these two things?

Oh, and here's the css I used to create the current effect, in case anyone is curious.

li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}
li.rMenu-expand li a:hover {
background-image:url('http://www.myasha.org/images2/menu_bghover.png') !important;
background-repeat:repeat-x !important;
background-color:#a3d7f1 !important;
}

lmilesw May 10, 2010 02:37 PM

Try modifying the selectors as shown changing the colors as needed.
HTML Code:

li.rMenu-expand li a {
background-color:#FDA94D !important;
margin-left:-15px !important;
color:black;
}
li.rMenu-expand li a:hover {
background-color:blue !important;
color:red !important;
}


emanuel1969 May 10, 2010 02:42 PM

The margin-left line did the trick for the drop-down menus. Thanks miles! Any suggestion on removing the hover properties for de-linked parent items?

juggledad May 10, 2010 02:45 PM

to get rid of the stripe, change your css insert of
HTML Code:

ul.rMenu li {
background:transparent !important
}
to
[html]ul.rMenu li ul {
background:transparent !important
}

[/html]
Do you want the sub-sub menu to act that way? ie: Our Work/Rally for Recovery

lmilesw May 10, 2010 02:47 PM

That's what the color statements are for. If you don't mind the text always being black even for hovered submenus you can eliminate the color statement from the second (hover) selector.

emanuel1969 May 10, 2010 02:58 PM

JD, that change didn't work, though the left-margin that lmilesw suggested did.

lmiles, I want a link hover color for menu items without children. I just want to get rid of the hover-color for the items that *do* have children. I have set these first-level items as "Do not link" yet they still appear as links when they are hovered. Seems like a bug. Shouldn't they not appear as links when you set "Don't link first level parent items in Page Menu Bar?" to "yes"?

emanuel1969 May 10, 2010 03:03 PM

Sorry JD, your code did, in fact, work. I had a syntax error. Thanks. Now I get the offset without the stripe.

lmilesw May 10, 2010 03:18 PM

Try this for your hover issue.
HTML Code:

li.rMenu-expand a {
color:black !important;
}


emanuel1969 May 10, 2010 03:35 PM

Great that did it. I see what you mean how the sub-menu items also remain black, but that's ok because I have a background hover change on the subs.

Two more questions...

1) How can I get "right-arrows" to appear in my second-level parent menu items? And,
2) How can I style the third-level menus? Ccheck out my "sub-sub" menu underneath the "Our Work" tab and then popping out to the right of "Rally for Recovery"... How can I bring that third-level menu closer to the left and offset it downwards a bit? I basically need to adjust the margins but I'm not sure how to assign the css insert.

Lastly, I want to donate more money to you guys. I am so impressed with Ata and the responsiveness I have received on this forum I want to support the people putting in the effort. Are general donations fine or should I specify the money is for forum moderators? Or should I donate to specific forum moderators? JD you have a link. lmiles I don't even know if you are a moderator or just a helpful member. It's kind of strange being able to donate to specific moderators. I like it when restaurants split tips equally among all the waiters.

lmilesw May 10, 2010 04:17 PM

I'm having a tough time finding where the right arrows went to. As for donations you can donate to the forum in general or Juggledad (moderator) by going here. I am just a very happy user of Atahualpa.

emanuel1969 May 10, 2010 07:41 PM

You mean the right arrows were there at one time? Now that you mention it, I think I remember them being there. Here are my css inserts. The problem must be with one of these:

ul.rMenu li ul {
background:transparent !important
}


li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}

li.rMenu-expand a {
color:black !important;

}

li.rMenu-expand li a:hover {
background-image:url('http://www.myasha.org/images2/menu_bghover.png') !important;
background-repeat:repeat-x !important;
background-color:#a3d7f1 !important;
}

lmilesw May 10, 2010 08:06 PM

What happens if you yank out the background image lines temporarily?

emanuel1969 May 10, 2010 09:42 PM

They reappeared when I removed the background images. In fact, I narrowed it down to the first background image. The one here:

li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}

It's this image that is somehow hiding the arrows.

emanuel1969 May 10, 2010 09:54 PM

But more importantly than the arrows... how can I add some margins to the third-level "pop-out" menus? I don't like the location it pops out too. I want it right next to the second level menu and about 15px down.

lmilesw May 10, 2010 09:56 PM

That's kinda what I figured. You have two background images competing and I'm not sure how or even if you can layer them so the arrows show on top. What about just setting a background-color instead of the images. I know it's not quite as nice looking but maybe.

emanuel1969 May 10, 2010 10:35 PM

My background images were nothing special, so I went ahead and changed them to just colors. Now the arrows are there. I did have all kinds of thoughts, though, for future sites using better background images there. Too bad. Isn't there a new menu system Ata is thinking about switching too for future upgrades?

And do you have any thoughts on my third-level menu styling issue? If it's possible, I know it is something like this...

li.rMenu-expand li a [SOMETHING ELSE GOES HERE] {
margin-top 15px !important;
margin-left -15px !important;
}

lmilesw May 11, 2010 12:33 PM

For third level styling this works. It is probably not all needed but I didn't want to spend time figuring out which specific selector. I let you fiddle.
HTML Code:

div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li a {
color: red !important;
}


emanuel1969 May 11, 2010 12:45 PM

Thanks Larry. I fiddled around and it didn't take me long to find the selector that worked. Here's the full insert I used:

div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand ul {
margin-top:8px !important;

}

Consider this thread [SOLVED]. Even though the little arrows prevent using a background image, this is good enough for me.


All times are GMT -6. The time now is 06:39 PM.

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