Joomla Templates Club 406,261 posts

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#198980

Hi,

I was trying to highlight the active menu item in Menu Module (well, the side Menu Module in fact, not the main MegaMenu).

I had spotted these lines, and indeed if I change the background color, it works if I *hover* a menu item.
I tried to add
.nav .open > a:active,
to have the same background on the active menu item, but it doesn’t work.

What have I missed ?
Txs

Marc

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
color: #ffffff
background: #33bed9
}

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539513

Can you share your working site url , so that we can assist you in a better way:cool:

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539517

Sure !
Sorry I didn’t think of it when I posted my msg 🙂

Here it is :

http://synthesix.com/en/about-us/team

I speak of lateral-left-menu. On the page I am linking to “Our Team” should have some coloured background to show that it is the one being active.

Yours,

Marc

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539518

HI
as per the screenshot you added in your first post

There is already white color .
>>
is it solved by you?

---

Attachments:

1. 

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539534

Hi,
No, it is not solved :
– when inactive, they have white background : OK
– when hovered, they get blue background : OK
– but wat I would like to have is that the *active* menu has also coloured background, and not the white background…

Txs for your help already 🙂

Marc

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539538

Try this
Add this css in your custom.css
and take a try

.nav > li > a:active {
text-decoration: none;
background-color: #eeeeee
}

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539664

Txs again for trying 🙂

I was full o fhope, but unluckily, it does not work

Or more precisely, it would work for a:link for example

.nav > li > a:link {
text-decoration: none;
background-color: #eeeeee
}

but not for a:active

.nav > li > a:active {
text-decoration: none;
background-color: #eeeeee
}

See for yourself in the Console of your browser, you can directly play in the custom.css file for example.

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539682

Hi
Remove the above code and try this in custom.css

.current {background-color: #eeeeee}


Let me know if it helps

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539698

Hi !

We’re almost there 🙂

The background color of active menu is indeed changed with

.current {background-color: #eeeeee}

But still there is two side effects :
1. the main menu also takes that background menu
2. but also, there is a little problem of overlapping background colours because of the round corner (see screenshot). And that is not neat

Do you see how to make it apply for example only on the side menu with our custom.css file ?

txs

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539711

Top menu also changed because it also active that time .
Even i think its better .

Just change the color code
#1F7282

1 user says Thank You to Pankaj Sharma for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539716

Hi,

Very good trick to change the color, picking the one for the main menu 🙂
Visually, it solves the problem for the main menu.

But for the lateral menu, you now see in the round-corners the overlap of background colors.

I can live with that, but isn’t there a cleaner way to give our background color to the active menu item without messing up with the original color of the template ?

txs,

M

---

Attachments:

1. 

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#539717

Hi again,

Here is the solution I found based on a mix of all your post 🙂
Doing this, the change only applies to lateral menu. And if I keep a colour which is very light, then the “round corner” overlap is less visible and can be ignored…

/* change background color of selected menu item in lateral menu */
.nav > li.current {
background-color: #eee
}
/* next line would work but also apply on main menu
.current {background-color: #1F7282} */

Txs again for all your feedback !

Marc

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539718

Glad you found it , All the best for your new site:)

1 user says Thank You to Pankaj Sharma for this useful post

1. woluweb

[Author]

Posts