Hi Again Menno:
I think I've made some headway. I structured my outerTpl a bit differently and the menu appears to be working as intended. Plus the toggle open featured now functions when viewed on small.
<!-- dh_main_nav_outerTpl -->
<nav [[+wf.classes]] data-topbar>[i][u]<!--I changed your ul to nav, move the wf.classes call to the left, and inserted data-topbar-->[/u][/i]
<ul class="title-area">
<!-- Title Area -->
<li class="name">[i][u]<!--deleted content here becasue I do not want a title-->[/u][/i]</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon">
<a href="#">Menu</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
[[+wf.wrapper]]
</ul>
</section>
</nav>