• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Menu item sub indicator css animation

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Menu item sub indicator css animation

This topic is: not resolved

Tagged: Animation, css, menu

  • This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by jgk.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 16, 2013 at 3:59 pm #20723
    jgk
    Member

    Hi!

    I've made an animated css arrow in the sub-indicator css class on the main menu of the metro theme to indicate that the menu item has sub items. The triangle goes to full opacity and points down on hover:

    http://bit.ly/12RVOW4

    I like it so far (only tested on chrome for mac thus far) but when the mouse goes down to a sub menu item, the triangle turns back up...

    I would like the triangle to stay pointed down when you are hovering over the menu items' sub items. Thanks for any help!

    I haven't been able to figure this out or find any documentation on genesis themes's built-in sub indicators.

    Thanks so much!

    February 19, 2013 at 1:50 pm #21418
    cehwitham
    Member

    I can't see the triangle pointers on your website so it's hard to say how you might change the styling to achieve what you're aiming for. Have you removed the arrow?


    Twitter: cehwitham Web: cehwitham.com

    February 19, 2013 at 3:38 pm #21461
    jgk
    Member

    Hi Chris,

    Thanks for looking at it!

    No, I haven't removed the arrow. It's working for me in chrome for mac, safari, safari for iphone and firefox for mac. (Although iphone css needs a little tweak.)

    Here is what I'm seeing in firefox.

    http://bit.ly/YxHT1D

    I know the css3 animation won't work in older browsers but I'm surprised the arrow isn't showing up at all.

    What browser and os are you using? Thanks again for checking it out.

    Jay

     

    February 19, 2013 at 3:53 pm #21471
    cehwitham
    Member

    Ah I can see the arrow now, I'm using Chrome on Mac.

    The border / box shadow that appears on hover remains when you hover over the dropdown so I suggest you apply the arrow effect to the same selector as that. I think it is a li:hover rather than the a:hover because the li contains the sub menu and therefore remain in a hover state when the sub menu is hovered.

    .genesis-nav-menu li a:hover, .genesis-nav-menu li:hover a {
    text-decoration: none;
    color: rgb(34, 34, 34);
    background-position: 0px -33px;
    box-shadow: 0px -5px rgb(51, 51, 51) inset;
    }

    I hope this helps.


    Twitter: cehwitham Web: cehwitham.com

    February 19, 2013 at 10:49 pm #21563
    jgk
    Member

    Thanks so much! That fixed it.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble