T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (7)

Resolved Mega menu items with multiple colours

0
Votes
Undo
  1. John
    John
  2. General Discussion
  3. Tuesday, 03 September 2013
  4.  Subscribe via email
How would I make each mega menu linkitem have an individual colour? For example, red for Home, blue for Contact us, purple for Support, etc. Is there an easy way to do it via CSS?
Thanks,
John
Comment
There are no comments made yet.
Accepted Answer
Enes
Enes
Accepted Answer Pending Moderation
0
Votes
Undo
You can assign CSS classes to menu items. Go to your menu item from Menu Manager and click on Link Type Options. You will find Link CSS Style field, enter the class name there and apply your color CSS coding.

Regards...
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
Responses (7)
John
John
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Enes
Enes
Accepted Answer Pending Moderation
0
Votes
Undo
You are most welcome John.
Regards...
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
tincup
tincup
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,
how can I have a different color for each mega menu active link?
Thanks
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi tincup,

Use the same way as above.
Then you need to style your .active

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: /* your color*/ !important;
background-color: /* your color*/ !important;
}


If you have knowledge about LESS, you can edit less file and recompile again.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
tincup
tincup
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Super User,

I assigned the CSS class to menu item (Link CSS Style in the Link Type Options). CSS class name is "menu1". I added this code to my custom.css file:


.menu1 {

padding-left:10px;

}

.menu1 .active > a,

.menu1 .active > a:hover {

color: white !important;

background-color: white !important;

}


However, the background color does not change and continues to refer to
.t3-mainnav .navbar .nav > .active > a, .t3-mainnav .navbar .nav > .active > a:hover, .t3-mainnav .navbar .nav > .active > a:focus

Sorry I can not show the link, the site is not online.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi tincup,

.menu1 .active > a


You should inspect the element and check if you rule is valid.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.