Editing Menu to put the tag around the

1

Does anyone have any idea how you could easily do this with the way roots handles the menu system in WordPress? Currently I’m using a sidebar widget for my custom menu along with an accordion style dropdown.

The only issue I am having is currently when you click into the dropdown you have to click on the text specifically (which is aligned to the right) to actually activate the link.

The way it’s laid out now is as follows (this is an example of one of the dropdowns):

<li class="menu-settings"><a href="/wp-admin/profile.php">Settings <i class="fa fa-cog"></i></a></li>

I can edit the output in the developer tools on Chrome and it works perfectly when it’s setup like this:

<a href="/wp-admin/profile.php"><li class="menu-settings">Settings <i class="fa fa-cog"></i></li></a>

My question is, what would be the most recommended/proper way to modify the navigation in Roots to handle this?

Thanks!
Zack

2

Not really a Roots question, this is some basic CSS padding (unless I’m completely misunderstanding you).

It seems like there is padding applied to your <li> which you will want to swap with the padding rule for your <a>; best to leave your <a> inside your <li> though.

If that doesn’t work you might consider posting a jsfiddle (if mods don’t close this thread) or heading to #css on Freenode for some CSS help.