I've been using this navigation menu in my bootstrap/underscores wordpress starter theme. Over my last few projects I've developed the following method for dealing with the flash of dropdown on page load for desktop (above the breakpoint viewport size.)
-
Set 'hover':false option when initiating flexnav
-
use old school show/hide css in the media query targeting viewports above the breakpoint:
@media (min-width:800){
.flexnav li > ul {
display:none;
}
.flexnav li:hover > ul {
display:block;
}
}
- To override the inline style set by the core js plugin code, I then add
!important to display:block.
That works but using !important indicates to me that there's a better way. Any ideas?
I've been using this navigation menu in my bootstrap/underscores wordpress starter theme. Over my last few projects I've developed the following method for dealing with the flash of dropdown on page load for desktop (above the breakpoint viewport size.)
Set
'hover':falseoption when initiating flexnavuse old school show/hide css in the media query targeting viewports above the breakpoint:
!importanttodisplay:block.That works but using
!importantindicates to me that there's a better way. Any ideas?