Footer: Modal Hover issues

[SWAV]

I recently placed some modals in the footer of my site. However, the hover state seems to be get over ridden and I can’t figure out how to fix it.

I would like the modal hover to be red when hovered over, similar to the menu items in the footer.

Also, is there any way to style the modal’s to look like they are menu items?

Thanks

[Barq™]

Hi again Swav,

Please send me a link to your website so I can take a look at it.
If you don’t want others to know it, you can mark it as private reply.

Cheers,

Stan.
Barqwithus.com

[Mohammad – SUPPORT]

Hi,
If you provide website url and wordpress admin login detail so i can debug to fix the issue very soon .
Thanks 🙂
With Best Regards
Swift Ideas

[SWAV]

This reply has been marked as private.

[Melanie – SUPPORT]

Hey SWAV,

does that help?

.textwidget a span:hover {
color: red!important;
}

[SWAV]

Yes it did! The hover state is now working great!

I still have a question though, how can I turn those modal to look like the rest of the menu items in the footer?

[Kyle – SUPPORT]

Try adding this custom css:

#footer .sf-button[data-toggle="modal"] {
  border-bottom: 1px solid #333;
  margin-right: 0;
}
#footer .sf-button[data-toggle="modal"]:hover {
  border-bottom: 1px solid #333333!important;
  margin-right: 0;
}
#footer .sf-button[data-toggle="modal"] {
  content: "\f105";
  display: block;
  float: right;
  font-family: FontAwesome;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

– Kyle

[SWAV]

Thanks Kyle, but unfortnately the CSS above did not do the trick: /

[Mohammad – SUPPORT]

Hi,
I have resolve your problem just tweak code . Thanks Kyle , great work :-).

#footer a.sf-button[data-toggle="modal"] {
  border-bottom: 1px solid #333;
  margin-right: 0;height:26px;width:100%
}
#footer  a.sf-button[data-toggle="modal"]:hover {
  border-bottom: 1px solid #333333!important;
  margin-right: 0;
}
#footer a.sf-button[data-toggle="modal"]:before {
  content: "\f105";
  display: block;
  float: right;
  font-family: FontAwesome;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

Thanks 🙂
With Best Regards
Swift Ideas

[SWAV]

It worked! Kyle your amazing! Thank you

[Mohammad – SUPPORT]

Hi,
You most welcome . I’m glad that issue resolved . Great Work Kyle 🙂
With Best Regards
Swift Ideas

[Kyle – SUPPORT]

Thanks Mohammad!

– Kyle

[SWAV]

Hey guys,
I just updated the theme and I have lost all the changes. I placed the CSS above in the new css file but it did not fix the issue.

Help would be great!

Thank you

[Mohammad – SUPPORT]

Hi,
Please always put custom css at Admin -> Theme Options -> Custom CSS. So your changes will never lost.
Thanks 🙂
With Best Regards
Swift Ideas