Public Forums 71,145 posts

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#192965

When an inactive item in the main menu is hovered, the styling changes to the configured ‘hover’ state style exactly as expected. However, almost immediately, a js process adds the class ‘open’ to the parent li element. This has the effect of changing the styling again to the style for the active item. This flickering effect is not noticeable with the colours set to the default values but if the text colours @navbar-default-link-hover-color and @navbar-default-link-active-color) and/or the background colours @navbar-default-link-hover-bg and @navbar-default-link-active-bg) are made very different from each other, the flicker is very noticeable.
Phil
Using T3 Bs3 Blank v2.0.0
T3 plugin v2.0.1
Chrome browser v31

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#515515

Hi Phil,

Could you turn off Optimize CSS option in template manager and post your site URL here for further checking? some screenshots of what you want to achieve would be better.

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#515612

I can’t find an Optimize CSS option but I am running with Development Mode on. I can’t give access to the site because I do all of my initial evaluation and development work in localhost. You can demonstrate the effect in development mode by adding the following to the end of the less/variables.less file:

@navbar-default-link-hover-bg: @red;
@navbar-default-link-active-bg: @green;


[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#515670

It’s quite hard to give you exact solution without seeing what you’re trying to achieve. It’s best if you bring your site online or build a demo site via our Demo Builder tool so that I can check and help you.

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#515738

Thanks for the offer but I’ll be able to sort things out. I just thought I’d let you know about it because it seems like a problem with the famework.
Phil

2 users say Thank You to doorknob for this useful post

1. Saguaros
2. phong nam

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#515898

This seems to sort it out:

.navbar-default {
.navbar-nav {
> li > a {
// Inactive main menu item
color: @navbar-default-color;
&,
&:hover,
&:focus {
// Transition needed from all states because hover triggers the addition of the class 'open'
.ja_transition();
}
}
> .active > a {
// The currently selected main menu item
&,
&:hover,
&:focus {
// The currently selected main menu item
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
// Transition needed from all states because hover triggers the addition of the class 'open'
.ja_transition();
}
}
> .active.dropdown > a .caret {
&,
&:hover .open,
&:focus .open{
border-top-color: @navbar-default-link-active-color;
border-bottom-color: @navbar-default-link-active-color;
.ja_transition();
}
}
> .dropdown > a .caret {
&,
&:hover .open,
&:focus .open{
border-top-color: @navbar-default-color;
border-bottom-color: @navbar-default-color;
.ja_transition();
}
}
> .open > a {
// Hovered menu item (including while dropdowns remain active)
&,
&:hover,
&:focus {
// The currently hovered main menu item
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
.caret {
border-top-color: @navbar-default-link-hover-color;
border-bottom-color: @navbar-default-link-hover-color;
}
}
}
}
}
// Note: Gradient to gradient transitions are not implemented in CSS3'
.ja_transition @Duration: 0.5s, @ease: ease) {
-webkit-transition: all @Duration @ease;
-moz-transition: all @Duration @ease;
-o-transition: all @Duration @ease;
transition: all @Duration @ease;
}

I left the transitions in but they can be taken out again of course.
Phil

edited to add corrected colouring of the caret

1 user says Thank You to doorknob for this useful post

1. phong nam

[Author]

Posts