Public Forums 71,145 posts

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#682667

Nothing needs to be debugged, I just can’t for the life of me find the Hover and Focus values in the submenus that drop down from the default purity 3 template.

I’m trying not to edit any of the template css or less, and just trying to make the changes using the custom.css file.

I have no idea how to target the list items in the submenu.

There are so many classes, I do not know how to properly target them to make the changes I need to make. (I’m trying to change the main nav to have a white background)

I’ve found some things like changing the color of the caret… but I can’t seem to find a way to successfully target the right properties in CSS.

.navbar-default .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #71737b
border-bottom-color: #71737b
}

Thank you.

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#682728

I finally found it, I had to figure out how to turn on :active and :hover states in google chrome developer tools.

.t3-megamenu .mega-nav > li a:hover,
.t3-megamenu .dropdown-menu .mega-nav > li a:hover,
.t3-megamenu .mega-nav > li a:focus,
.t3-megamenu .dropdown-menu .mega-nav > li a:focus {
background-color: #C3c2c6
text-decoration: none;
}

Now I have a problem where the animation of leaving the <li> goes to a darker grey instead of fading back to white. (it goes from light grey to dark grey, back to white)

Also: When I venture on further down the rabbit hole, onto the second submenu the background-color state for the parent <li> goes back to the dark grey. How do I target that?

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#748011

I finally found it, I had to figure out how to turn on :active and :hover states in google chrome developer tools.

.t3-megamenu .mega-nav > li a:hover,
.t3-megamenu .dropdown-menu .mega-nav > li a:hover,
.t3-megamenu .mega-nav > li a:focus,
.t3-megamenu .dropdown-menu .mega-nav > li a:focus {
background-color: #C3c2c6
text-decoration: none;
}

Now I have a problem where the animation of leaving the <li> goes to a darker grey instead of fading back to white. (it goes from light grey to dark grey, back to white)

Also: When I venture on further down the rabbit hole, onto the second submenu the background-color state for the parent <li> goes back to the dark grey. How do I target that?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#683652

Hi @davidlezette,

May I know your site url so I can have a look first ?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#748410

Hi @davidlezette,

May I know your site url so I can have a look first ?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#750989

Hi @davidlezette,

Please use this code :

.t3-megamenu .mega-nav > li.open > a,
.t3-megamenu .dropdown-menu .mega-nav > li.open > a {
background: transparent;
}

but make sure it declared before the code to hover state or the hover state won’t work.

1 user says Thank You to Adam M for this useful post

1. davidlezette

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#705146

Thank you! That worked perfectly 🙂

Cheers!

[davidlezette Friend davidlezetteJoin date: August 2015Posts: 7Downloads:0Uploads:0 Thanks: 2]

#751697

Thank you! That worked perfectly 🙂

Cheers!

[Author]

Posts