How to add arrows to menu

  • Resolved Mew

    (@gokumew2)


    6 years, 3 months ago

    Hi.

    I am using the Twenty Twelve theme for my website and would like to add arrows to parent menus (downward arrow for parent menu with children, and right arrow for child menus with children).

    Could someone please tell me how this can be achieved? I would also prefer to use a simple image or icon rather than ▼ and ?.

    Any assistance would be appreciated! Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Geoffrey Shilling

    (@geoffreyshilling)

    Volunteer Moderator

    It’s hard to tell without seeing the page, but based on the default classes for Twenty Twelve, what about something like this:

    ul.nav-menu > .menu-item-has-children > a::after {
    content: "▼";
    padding-left: 3px;
}

ul.sub-menu > .menu-item-has-children > a::after {
    content: "?";
    padding-left: 3px;
}

    You would just have to change the arrows to whatever you wanted to use and maybe adjust the spacing.

    Thread Starter Mew

    (@gokumew2)

    Hi.

    That worked, thank you!

    But unfortunately I realized that if I did this, my mobile menu (I use the Mobile Menu plugin) which already adds in arrows gets a second arrow. I decided to get creative and make two menus, one for desktop view and one for mobile view where in the desktop view I added the arrows in directly to the link text.

    Appreciate the help though!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add arrows to menu’ is closed to new replies.