Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] Styling submenus different from menu bar


  #1  
Old May 10, 2010, 02:56 AM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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!
  #2  
Old May 10, 2010, 06:21 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
see if this helps - http://forum.bytesforall.com/showthread.php?t=7045
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old May 10, 2010, 12:59 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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
  #4  
Old May 10, 2010, 01:32 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old May 10, 2010, 01:39 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #6  
Old May 10, 2010, 02:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 10, 2010, 02:27 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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!
__________________
Emanuel
http://www.sferios.com
  #8  
Old May 10, 2010, 02:58 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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;
}
__________________
Emanuel
http://www.sferios.com
  #9  
Old May 10, 2010, 03:37 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old May 10, 2010, 03:42 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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?
__________________
Emanuel
http://www.sferios.com
  #11  
Old May 10, 2010, 03:45 PM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old May 10, 2010, 03:47 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 10, 2010, 03:58 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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"?
__________________
Emanuel
http://www.sferios.com
  #14  
Old May 10, 2010, 04:03 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
Sorry JD, your code did, in fact, work. I had a syntax error. Thanks. Now I get the offset without the stripe.
__________________
Emanuel
http://www.sferios.com
  #15  
Old May 10, 2010, 04:18 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Try this for your hover issue.
HTML Code:
li.rMenu-expand a {
color:black !important;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #16  
Old May 10, 2010, 04:35 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #17  
Old May 10, 2010, 05:17 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #18  
Old May 10, 2010, 08:41 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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;
}
__________________
Emanuel
http://www.sferios.com
  #19  
Old May 10, 2010, 09:06 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
What happens if you yank out the background image lines temporarily?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old May 10, 2010, 10:42 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #21  
Old May 10, 2010, 10:54 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #22  
Old May 10, 2010, 10:56 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #23  
Old May 10, 2010, 11:35 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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;
}
__________________
Emanuel
http://www.sferios.com
  #24  
Old May 11, 2010, 01:33 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #25  
Old May 11, 2010, 01:45 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Repositioning and Styling Menu Bar to Overlay Header Banner. Please help! lunaris Page & Category Menu Bars 2 Mar 20, 2010 10:59 AM
[SOLVED] Styling Menu Bar gregrunco Header configuration & styling 2 Feb 28, 2010 10:54 AM
How to make dropdown submenus fly out from Page Menu Bar ON HOVER? one-from-lv Page & Category Menu Bars 0 Oct 9, 2009 03:21 PM
Page Menu Bar Styling chair Header configuration & styling 1 Aug 1, 2009 07:06 AM


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


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