I found examples adding a class to top level items, so we can display an arrow in menu items with sub-items, but is seems terrible to cope with the already built in WordPress classes, can't display the arrow with current and css hover, it just ruins all states.
The current nav menu is like this <li><a>Text</a></li>
Is there someway to add a <span class="something"><i class="something"></i></span>
within the parent <a></a>
tags instead?
Example
<li class="main-nav__item">
<a class="main-nav__item-link" href="index.html">
<span class="main-nav__item-icon-wrapper">
<i class="main-nav__item-icon icon-home"></i>
</span>
<span class="main-nav__item-content">Home</span>
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__item-link" href="index.html">
<span class="main-nav__item-icon-wrapper">
<i class="main-nav__item-icon icon-Blog"></i>
</span>
<span class="main-nav__item-content">Blog</span>
</a>
</li>
The current code Adds the tags outside the tags that is parent
class Walker_Nav_Menu extends Walker {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"main-nav\">\n";
}
}