[peyton_dcostaParticipant]

Hello,

I am having difficulty removing the on hover effect in superfly. My site is: http://lift-jesus-higher-rally.ca

If you go over to the superfly menu on the left, you will see that on hover of each of the items there is a line that slides below. I want to remove it and add my own hover effect.

Also, is there a way to change the hover effect colour on the social icons at the bottom of my menu? Currently they show various colours on hover but I want them to be all the same colour.

Any assistance is appreciated.

Thank you.

[peyton_dcostaParticipant]

Sorry few other questions in addition to the questions above (all regarding the Superfly menu)

1)How can I change the submenu indicator colour?

2) Is the submenu indicator an icon? If yes how can I change the icon?

3) If the submenu indicator is not an icon, how can I replace it with an icon?

sorry for all the trouble but any and all help would be greatly appreciated.

[LelyModerator]

Hello There,

To remove that line on the menu, please add this:

#sfm-sidebar.sfm-hl-line .sfm-menu li > a:before {
    height: 2px;
}

To make the hover color of the social icons below the menu the same, please use this custom CSS:

#sfm-sidebar .sfm-icon-facebook a:after,
#sfm-sidebar .sfm-icon-twitter a:after,
#sfm-sidebar .sfm-icon-youtube a:after,
#sfm-sidebar .sfm-icon-email a:after {
    background: green; /*Change to your preferred color*/
}

Hope this helps.

[peyton_dcostaParticipant]

Hey Lely,

You are awesome!!! Thank you.

I still need some help with the submenu indicator however.

1)How can I change the submenu indicator colour?

2) Is the submenu indicator an icon? If yes how can I change the icon?

3) If the submenu indicator is not an icon, how can I replace it with an icon?

Thank you again for the other code. It was perfect!

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

1) You can add this under Custom > CSS in the Customizer to change sub menu icon color:

 #sfm-sidebar .sfm-menu-level-0 li .sfm-sm-indicator i, #sfm-sidebar .sfm-menu-level-0 .sfm-sl, .sfm-title h2, .sfm-social:after {
    color: #fff !important;
}

2) Yes, sub menu indicator is icon. We are using font awesome library. You can use following code to change indicator icon:

.sfm-pos-left .sfm-indicators .sfm-sm-indicator i:after {
    content: "\f103" !important;
}

You can walk-through Font awesome website for commonly used icons as you need to replace f103 with icon content code.

http://fontawesome.io/icons/

Thanks.

[peyton_dcostaParticipant]

Mr.Rai,

You are simply amazing! Thank you, sir.

[peyton_dcostaParticipant]

Hey Prasant,

A new problem arose after I put in your code for the submenu indicator. While it changed the colour before mouse over, it stopped recognizing my mouse over code which was working (except with the default submenu indicator colour).

Any suggestions?

Thank you again for the previous code.

[RadModerator]

Hi there,

It works on my end, would you mind providing a screenshot? Is it just the hover color? Or the hover functionality?

You may try this with your preferred color.

 #sfm-sidebar .sfm-menu-level-0 li .sfm-sm-indicator i, #sfm-sidebar .sfm-menu-level-0 .sfm-sl, .sfm-title h2, .sfm-social:after {
    color: #fff !important;
}

 #sfm-sidebar .sfm-menu-level-0 li:hover .sfm-sm-indicator i, #sfm-sidebar .sfm-menu-level-0:hover .sfm-sl, .sfm-title h2, .sfm-social:after {
    color: #000 !important;
}

Thanks!

[peyton_dcostaParticipant]

Hey Rad,

Your code worked. Not sure why mine doesn’t but…I am happy that it’s working how it happened doesn’t matter to me.

Thank you very much.

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts