My wordpress menu has ::before elements that slide across when the menu items are hovered on, it looks great but the problem is when the before element slides across it covers the text and the way wordpress does the menu links is that by default the link only covers the text of the menu item and not the whole div.I don't have enough rep to take show pictures of the page structure but hopefully you can get the idea.
header.php code
<div class="navbar ">
<?php
$defaults = array(
'container' => 'div',
'container_class' => 'navbar',
'theme-location' =>'primary-menu',
'menu_class' => 'no-bullet',
'menu_class' => 'navitems',
);
wp_nav_menu( $defaults );
?>
How a menu item renders on dev tools
<li id="menu-item-82" class="nav-b icon-dice menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-57 current_page_item menu-item-
82">
::before
<a href="http://--------/crafts/">Crafts</a>
</li>
I really need some help on this, if you need me to add anything just comment
You can achieve this with the help of wp menu walker. It gives you the ability to manipulate the structure of the menu. You can refer following example:
http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code