• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Flyout Menu Indicator?

Home › Community Forums › Aspire Theme Support › Flyout Menu Indicator?

  • This topic has 3 replies, 2 voices, and was last updated 5 years, 2 months ago by Wes.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 28, 2018 at 7:02 pm #22481
    erinok
    Customer

    Hi Wes! I would like to add a little > arrow on my dropdown menu.

    https://movingintoharmony.com/practice/

    Under OUR PRACTICE, the item OUR PERSPECITVE has 3 sub pages, but one cannot tell without the little arrow. Can you please advise on how I might add that? Thanks so much!

    March 1, 2018 at 9:23 am #22492
    Wes
    Moderator

    Here’s a few tutorials that show how to do it.

    https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/

    https://docs.cobaltapps.com/article/170-how-to-add-font-awesome-icons-to-your-custom-menu-items

    https://www.billerickson.net/code/add-arrows-to-menu-items/

    You may have to make some CSS adjustments if you need it to look a certain way, but these all should work by default.

    If you want to try some other tutorials just let me know. There are a few different ways to do it.

    March 13, 2018 at 3:31 pm #22516
    erinok
    Customer

    Thanks Wes, super articles! I followed the first one and added arrows. I wish that the top level arrows would point down like V

    I do like how the 2nd-level arrows point out like >

    https://movingintoharmony.com/

    Do you by chance know how I might do that? This is the code I added:

    /* Menu Dropdown arrows
    ——————————————— */

    .genesis-nav-menu > .menu-item-has-children > a:after {
    content: “\f347”;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 ‘dashicons’;
    padding-left: 3px;
    vertical-align: top;
    }

    .genesis-nav-menu .menu-item-has-children > a:after {
    content: “\f345”;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 ‘dashicons’;
    padding-left: 3px;
    vertical-align: top;
    }

    March 15, 2018 at 5:01 pm #22519
    Wes
    Moderator

    This line content: “\f345”; in the second part of your code is the down arrow.

    The f347 is the right arrow.

    Use f345 if you want to use a down arrow.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework