Flyout Menu Indicator?

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

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.