Menu Drop Down Background Colors

Sep '13 Joomla Template
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue Nov 11, 2014 5:38 pm
Reply with quote
Report this post
Hello,

I'm seeking direction as to the best method to modify the background color of drop down sub-menus. By chance, is this the intention of "additional class" within "Menu Params (GavickPro)"? My rather simple goal is to have the drop down sub-menu background color follow the color scheme of template color VI that I've chosen in the Joomla Template Manager.

Currently my Level 2-4 background colors are each "lavender", while I'd like Level 2 to remain "lavender", Level 3 to be "black" and Level 4 to be "light green" (again, simply follow the template color style).

Any help is greatly appreciated!

Craig
User avatar
Fresh Boarder

GK User
Wed Nov 12, 2014 7:27 am
Reply with quote
Report this post
Could you please post an url to your site?
User avatar
Moderator

GK User
Wed Nov 12, 2014 12:05 pm
Reply with quote
Report this post
Site can be found at http://connected-planet.com/

User: admin
PW: admin

Thank you!
User avatar
Fresh Boarder

GK User
Wed Nov 12, 2014 8:00 pm
Reply with quote
Report this post
On your site there is a colour style switcher still active. It uses cookie to store last used colour scheme.
When I have visited your site the colour scheme was set to Style 6 and as I understand it is correct. Menu backgrounds was also within this colour scheme.
Perhaps you have a cookie with different colour scheme set from the frontend and that is the problem source? Please try to use your browser in private/incognito mode.
User avatar
Moderator

GK User
Wed Nov 12, 2014 10:15 pm
Reply with quote
Report this post
I sense that you're confirming that by design that my each of my nested sub-level menu backgrounds should by default be displaying (per level) a unique color within the template color scheme (VI).

I've turned OFF the color style switcher, I've cleared cookies, browsed privately, and I don't see any difference concerning the background color of the sub-menu groups and levels.
User avatar
Fresh Boarder

GK User
Thu Nov 13, 2014 4:49 pm
Reply with quote
Report this post
Ok, so I don't quite get it - could you please show me a sample on our demo server where this different background colour for each of menu levels is applied?
User avatar
Moderator

GK User
Thu Nov 13, 2014 6:57 pm
Reply with quote
Report this post
Ok, let's start anew. ;-)

I'm NOT disputing whether the template is functioning properly. Actually, I think it is working fine.

On my home page, across the top-right, you see my HOME, SERVICES, SOLUTIONS, etc links. I consider these links to be level #1. When, for example, you hover over SERVICES the level #2 sub-menu drop-down displays with the "lavender" background, which is desired, and of course this "lavender" color is part of template color scheme (VI). While hovering over SERVICES, if you then hover over "Computing in the Cloud", the level #3 sub-menu drop down displays with the same "lavender" background. It is at this point, my desire to have the level #3 background be "black" (the 2nd color of color scheme VI), and that if you continue by hovering over "Software as a Service", the level #4 drop-down background be "green" (the 3rd color of color scheme VI).

Of course, it's also a goal to achieve this as cleanly as possibly, and I'm asking whether this multi-level, multi-color goal of mine was any part of the template design consideration, and whether my goal could be achieve with no changes to the CSS by using either an "override" in Joomla backend, Template Manager or in a menu module.

Hope my question and intentions are clearer now. Thanks!
User avatar
Fresh Boarder

GK User
Fri Nov 14, 2014 7:46 am
Reply with quote
Report this post
I think the menu was not considered to act as you describe but is not that hard to make it that way ;).
Please edit: /templates/gk_cloudhost/css/override.css and add at its end:
Code: Select all
#gkMainMenu .gkMenu > ul li div.childcontent div.childcontent {background: #000;}
#gkMainMenu .gkMenu > ul li div.childcontent div.childcontent div.childcontent {background: #adc75b;}
ul.level3 small {color: #fff !important;}

Remember to enable "CSS override" in template settings - advanced section.
User avatar
Moderator

GK User
Sat Nov 15, 2014 12:18 am
Reply with quote
Report this post
OK, that's understandable. Thanks for the CSS too!
User avatar
Fresh Boarder

GK User
Sun Nov 16, 2014 3:36 pm
Reply with quote
Report this post
Did the css work for you correctly?
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.