sub-navigation color issue

  • 2
  • Problem
  • Updated 3 years ago
  • In Progress
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Pat.  

Here is the snarky answer:   Make the hover color different than the background color of your nav! 

Actually I can't reproduce the issue.  Both the nave and the subnav base state and hover state colors and backgrounds can be specified and seem to work with minimal weirdness.  Maybe there is somthing else going on here. 

 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Try the same thing with "Clean Green" theme.

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of Blake Curtis

Blake Curtis

  • 268 Points 250 badge 2x thumb
Same thing on my horizontal nav menu. Both of the options appear selected.

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^ bump ^^ still an issue
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
So it appears I've managed to fix the issue. I've diagnosed it in a manner that should allow a workaround to be implemented in people's orgs and for skuid themselves to eventually fix the issue.

In short you can fix the problem by doing one of the following:
  1. If you know you are using your own custom theme:
     (skuid menu) -> theme -> "Themes" -> wrench icon
    If you don't have a wrench icon beside your theme name: your theme is read-only. Two options: you can either clone it and continue, or go with the second solution below:

    "Edit Theme" Page -> Left-hand menu -> "CSS" -> Open the Resource Editor by clicking the "</>" box under "Inline CSS" -> append the following CSS:
    .sk-subnavigation .sk-navigation-item:hover a {
        color: inherit;
    }

  2. By adding the above as a CSS Include in your master page.
A short video I've made showing the problem and how to solve it is shown below.
Cheers!

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Woot Wooooooot!!!!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
MBlazonry rocking the world!  Way to go guys.  Glad to see you growing! 
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
Re-posted the video (on my new mB channel) here: