CODEWITHSUNDEEP
cssjoomlamenu
user2149917
user2149917

Reputation: 1

CSS active menu item

Hi I'm trying to modify a web template which doesn't have different colors for active menu items. I've tried various changes to be able to adjust this. Any ideas? Here is the css:

/** TOP MENU        **/

.top_menu .moduletable {
margin:0;
}

.top_menu li {
margin:0px 0 0 5px ;
padding:0;
float:left;
height:100px;
list-style : none;
background : transparent url(../images/top_menu_left.png) 0 0 no-repeat;
opacity:0.6;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* fix IE8   */
filter: apha(opacity = 60);                    /* fix IE7       */
-webkit-transition : all 0.4s ease-in-out;
-moz-transition : all 0.4s ease-in-out;
-ms-transition : all 0.4s ease-in-out;
-o-transition : all 0.4s ease-in-out;
transition : all 0.4s ease-in-out;
}

.top_menu li:hover {
opacity:1;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* fix IE8  */
filter: apha(opacity = 100);                                               /* fix IE7       */
}

.top_menu li a {
display:block;
color: #24221E/*8c8c8c*/;
text-shadow:0 0 3px #fff;
background : transparent url(../images/top_menu_right.png) 100% 0 no-repeat;
text-decoration:none;
text-transform: none;
font-weight:bold;
font-size:90%;
margin-right:-13px;
padding: 60px 22px 4px 20px;
height:40px;
}

Any help would be greatly appreciated

Upvotes: 0

Views: 1598

Answers (1)

Max
Max

Reputation: 1002

I see that you are using Joomla as a Content Management System and you have to use a class to style an item, for example active, and then you can use CSS to assign a different styling for this item.

.active {
    text-decoration: underline;
    font-weight: bold;
}

If you want to change the color of the link you need to adress the a tag directly using the following code.

.active a {
   color: red;
}

You might find this answer also useful: Joomla - how to hightlight the menu item for active page

Upvotes: 1

Related Questions