Here's my code now:
$menu_icon = get_field('menu_icon');
if($menu_icon) {
$m_icon = '<img src="'.the_field('menu_icon').'">';
} else {
$m_icon = "";
};
$personal = array(
'theme_location' => 'personal',
'menu' => 'Personal Menu',
'before' => '$m_icon',
);
wp_nav_menu( $personal );
And here's what it spits out:
<ul id="menu-personal-menu" class="menu">
<li class="menu-item>
$m_icon <a href="#">Link</a>
<ul class="sub-menu">
<li>$m_icon <a href="#1">SubLink 1</a></li>
<li>$m_icon <a href="#2">SubLink 2</a></li>
<li>$m_icon <a href="#3">SubLink 3</a></li>
</ul>
</li>
</ul>
I'd like to have it produce something like this:
<ul id="menu-personal-menu" class="menu">
<li class="menu-item>
<a href="#">Link</a>
<ul class="sub-menu">
<li><img src="path/sublinkimg1"> <a href="#1">SubLink 1</a></li>
<li><img src="path/sublinkimg2"> <a href="#2">SubLink 2</a></li>
<li><img src="path/sublinkimg3"> <a href="#3">SubLink 3</a></li>
</ul>
</li>
</ul>
Here's the general idea:
It's wrong for a few reasons. I know the advanced custom field: "menu_icon" probably isn't able to retrieve anything outside of a loop, and I'm not familiar enough with the wp_nav_menu() function to know whether or not it's possible to echo an image specific to the page it's displaying.
Does anyone know how I can achieve this?