Menu Colors (hover, current item, etc.)

resolved (30 posts) (3 voices)

  1. johnnyp14
    Member

    I was able to get this working on the Echelon theme, but not on Modular.

    I'd like to be able to customize the following:
    submenu background color
    submenu font color
    submenu hover effect
    submenu background hover color

    Also, I'd like to have the hover effect of any parent item remain when hovering over the children/submenu.
    Ex. If a parent item turns white when hovered, it should remain white when continuing to hover the submenu items.

    Is any of this possible with Modular?

    Thanks so much!

    Posted 4 years ago #
  2. Hi!

    Have you tried the skin manager? If you want just send us a link to your page so we can help you with the Custom CSS

    -roch

    Posted 4 years ago #
  3. johnnyp14
    Member

    The default options in the skin manager only show a handful of menu options. So I added the ones listed here:
    http://mysitemyway.com/docs/index.php/Modular_Advanced_Skinning#Menu_Styles

    but they didn't change the background of the child menu. I also couldn't find any way to keep the hover effect of the parent element when hovering over its child submenu elements.

    http://www.snowbikekits.com

    Posted 4 years ago #
  4. Elliott
    Support

    For the sub menu you can target it like so,

    .sub-menu { background: white !important; }
    .sub-menu a { color: red !important; font-size: 12px !important; }
    .sub-menu a:hover { color: blue !important; }
    Posted 4 years ago #
  5. johnnyp14
    Member

    Just the text color is changing. I still cannot get the background of the submenu to change color.
    Also, how do you get the parent menu item to keep its hover state when hovering the child elements?
    Ex:
    CONTACT (gray normal, white when hovered)
    -->Email (CONTACT stays white when hovering over "Email")

    Posted 4 years ago #
  6. Hi!

    I'm getting a coming soon page for that link, do you have a test site that you could send us?

    -roch

    Posted 4 years ago #
  7. johnnyp14
    Member

    I send you a PM that included the login credentials

    Posted 4 years ago #
  8. johnnyp14
    Member

    Any update on this?

    Posted 4 years ago #
  9. Hi!

    Probably you've sent this only to Elliott. If you could send this to me that would be great also

    -roch

    Posted 4 years ago #
  10. johnnyp14
    Member

    I clicked on your username and it took me to an email form. That's what I used.
    I sent another one.

    Posted 4 years ago #
  11. johnnyp14
    Member

    I sent it twice now.

    Posted 4 years ago #
  12. I haven't got any email from you, please send using the "PM this user" link.

    -roch

    Posted 4 years ago #
  13. Oh, now I got your PM

    Hold on I'll check it

    Posted 4 years ago #
  14. Hi!

    This Custom CSS will work in your case:

    .children { background: white !important; }
    .children a { color: red !important; font-size: 12px !important; }
    .children a:hover { color: blue !important; }

    -roch

    Posted 4 years ago #
  15. johnnyp14
    Member

    I added that and it didn't seem to do anything.
    Also, how would I get the parent element to remain in the hovered state when hovering over the children elements?

    Thanks again

    Posted 4 years ago #
  16. Hi!

    About the parent element, I'm not sure if that's possible.

    About the CSS code, where are you adding that? I tried here and it worked fine.

    -roch

    Posted 4 years ago #
  17. johnnyp14
    Member

    See http://www.rivervalleycf.com to see what I mean about the parent element remaining in the hovered state when hovering over the children. This is a common thing.

    I'm adding it directly into the skin settings.

    Posted 4 years ago #
  18. Elliott
    Support

    Try adding this in Dashboard -> your theme -> General Settings -> Custom Javascript,

    jQuery('.sub-menu').hover(function(){
    jQuery(this).parent().children('a').css({ 'color' : 'red' });
    }, function(){
    jQuery(this).parent().children('a').css({ 'color' : 'black' });
    });
    Posted 4 years ago #
  19. johnnyp14
    Member

    Nothing changed.

    Posted 4 years ago #
  20. johnnyp14
    Member

    .jqueryslidemenu ul ul li {}
    .jqueryslidemenu ul ul li:hover {}

    That got the submenu backgrounds to change. I think the only issue is getting the parent element to stay in its hover state. You guys actually have a theme that does this in your demo:
    http://themes.mysitemyway.com/?theme=Fusion

    When you hover over "BLOG" for instance, the text gets darker. If you move your mouse over any of the children elements (submenu), "BLOG" still remains dark. Same concept, I'll just be using a different color.

    Posted 4 years ago #
  21. Elliott
    Support

    Try this,

    jQuery('.sub-menu').hover(function(){
    jQuery(this).parent().find('a span').css('color', 'red');
    }, function() {
    jQuery(this).parent().find('a span').css('color', 'black');
    });
    Posted 4 years ago #
  22. johnnyp14
    Member

    Nothing

    Posted 4 years ago #
  23. Elliott
    Support

    Well it's working fine on my XAMPP setup. Are you sure your adding it in the custom javascript field?

    Posted 4 years ago #
  24. johnnyp14
    Member

    Had to modify it, but it sort of works. It doesn't revert back to the non-hover color unless you save the original color's state. This seems like a lot of unnecessary overhead for something that should be easy. Is Modular's hierarchy different than Fusion for the menu? You already accomplish this exact function in several of your themes, so I'm not understanding how it is different. It shouldn't require any Javascript.

    http://www.rivervalleycf.com uses Echelon and accomplishes this.

    Thoughts?

    https://www.google.com/search?q=parent+remain+hovered+while+children+elements+hovered&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb

    Posted 4 years ago #
  25. johnnyp14
    Member

    Any word?

    Posted 4 years ago #
  26. Elliott
    Support

    You'll need to use the custom javascript. I don't know why it's not working on your end though.

    Posted 4 years ago #
  27. johnnyp14
    Member

    How does Fusion achieve this?

    Posted 4 years ago #
  28. johnnyp14
    Member

    ?

    Posted 4 years ago #
  29. Elliott
    Support

    It's in the skin stylesheet lines 4 - 14.

    Posted 4 years ago #
  30. johnnyp14
    Member

    I'll just chalk this up to "it's only possible one some things."

    Thanks for your responses.

    Posted 4 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme