How to add down arrow for header menu parents with children

  • To add a down arrow to a parent menu that has children (2nd tier) via CSS:

    ul#menu-cancer-defiance li.menu-item-has-children > a:after {

  color: #fff;
  content: '?';
  padding-left: 6px;

}

    Change “menu-cancer-defiance to the ID set for your menu name in the theme options, i.e. menu-{your menu with any spaces converted to dashes} or inspect the page and get the ul’s ID from the HTML.

    And to account for mobile view use this media query as well, setting the max-width to match the mobile breakpoint set in theme options (i.e 960):

    @media only screen and (max-width: 960px) {

	ul#menu-cancer-defiance li.menu-item-has-children > a:after {
	
		display: none !important;
	
	}
    • This topic was modified 7 years, 9 months ago by jgoldbloom.
  • The topic ‘How to add down arrow for header menu parents with children’ is closed to new replies.