[M PezParticipant]

I do not want my selected menu item and the rollover menu color to be the same. How can I make a CSS override so the rollover color is different?

[RubinKeymaster]

Hey Pezatti,

can you give me the address of your site so I can give you the code. That’s no problem to do! 🙂

[M PezParticipant]

This reply has been marked as private.

[KoryKeymaster]

Hey Michelle,

Try this out:

body.x-navbar-fixed-left-active .x-navbar .x-nav > li > a:hover,
body.x-navbar-fixed-left-active .x-navbar .x-nav > .current-menu-item > a {
  -webkit-box-shadow: inset 8px 0 0 0 #999 !important;
          box-shadow: inset 8px 0 0 0 #999 !important;
}

Thanks!

[M PezParticipant]

Thank you.

Perhaps I am doing it wrong. I tried your suggestion but it did not seem to work. My goal was to have a different color for the menu rollover than the selected menu color. I am trying to prevent the user from ever seeing two menu items with the same color bar next to it. I know this is common but I have never been a big fan of it.

This one changed the color but both the select menu item color and the rollover were the same:

body.x-navbar-fixed-left-active .x-navbar .x-nav > li > a:hover,
body.x-navbar-fixed-left-active .x-navbar .x-nav > .current-menu-item > a {
  -webkit-box-shadow: inset 8px 0 0 0 #999 !important;
          box-shadow: inset 8px 0 0 0 #ff8055 !important;
}

This one did not appear to change anything:

body.x-navbar-fixed-left-active .x-navbar .x-nav > li > a:hover,
body.x-navbar-fixed-left-active .x-navbar .x-nav > .current-menu-item > a {
  -webkit-box-shadow: inset 8px 0 0 0 #ff8055 !important;
          box-shadow: inset 8px 0 0 0 #999 !important;
}

[KoryKeymaster]

Michelle,

Sorry for any confusion on this, you will simply need to split the selectors out like so:

body.x-navbar-fixed-left-active .x-navbar .x-nav > li > a:hover {
  -webkit-box-shadow: inset 8px 0 0 0 #999 !important;
          box-shadow: inset 8px 0 0 0 #999 !important;
}

body.x-navbar-fixed-left-active .x-navbar .x-nav > .current-menu-item > a {
  -webkit-box-shadow: inset 8px 0 0 0 #ff8055 !important;
          box-shadow: inset 8px 0 0 0 #ff8055 !important;
}

This way you’re targeting the hover state separately from the current page state.

Thanks!

[M PezParticipant]

Thanks so much for your help. I think this really looks better than the default behavior and it would be great to see this added as an option. It’s a subtle difference but I think it makes more visual sense.

I had to make a slight modification to your code above (with the split selectors). I was getting one tiny undesirable result. The menu item that was already selected was also change color on rollover.

Not sure if I did it this the proper way. I removed (!important) from the rollover code and it seems like it works.

Here is a before and after example.

Here is the current code that I am using:

body.x-navbar-fixed-left-active .x-navbar .x-nav > .current-menu-item > a {
  -webkit-box-shadow: inset 8px 0 0 0 #566471 !important;
          box-shadow: inset 8px 0 0 0 #566471 !important;
}

body.x-navbar-fixed-left-active .x-navbar .x-nav > li > a:hover {
  -webkit-box-shadow: inset 8px 0 0 0 #c2cad1;
          box-shadow: inset 8px 0 0 0 #c2cad1;
}

[M PezParticipant]

One little odd thing that I have noticed with your theme is that it will frequently flash your default color of red when selecting or rolling over menu items. The issue is not specific to this modification, I have been seeing this for a while. It also seems to behave inconsistently with Safari on a Mac. Oftentimes the rollover does not show at all.

[KoryKeymaster]

Thanks for the feedback, Michelle. We’ll certainly take a look into this when we can. Glad to know everything is in order for you now! 🙂

[Author]

Posts