Adding arrows to the menu dropdowns

  • Resolved jrrude

    (@jrrude)


    10 months, 4 weeks ago

    I have sub links under the News and Get Involved tabs on the menu but you won’t now that unless you highlight it so I want to add a arrow next to them to indicate more under them.

    I have been looking into it but I have yet to find anything so any help or a link I could look into would be great help.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    To start with, add the following to the Additional CSS section of the customizer or style book:

    .menu-item-has-children a:after {
    content: '\25BC';
}

    You might want to choose a different symbol than what I chose. You can use any font character’s hexcode similar to what’s shown or paste in the actual symbol character.

    You may also wish to fiddle with font size, padding and/or margins to get the size and spacing the way you want. Add any desired styles below the content: rule.

    Thread Starter jrrude

    (@jrrude)

    That works great but now I have the arrow on the sub items is there anyway to keep the arrow on just the main items?

    Thread Starter jrrude

    (@jrrude)

    For anyone else who will need this I figured it out here is the CSS for it.

    .menu-item-has-children > a:first-child:after {
    content: '\25BC';
}

.menu-item-has-children > a:after {
    content: '';
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding arrows to the menu dropdowns’ is closed to new replies.