Materialize nav bar issue - html

Question

So I have this navbar made with materialize
My code is:
<nav class="light-blue lighten-1 " role="navigation">
<div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>
<ul id="navbarUl" class="right hide-on-med-and-down">
<li class="active">Misiuni</li>
<li>NewsFeed</li>
<li>Clasament</li>
<li> </li>
<li id="navbarLi">
<div class="row">
<div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
<div class="col s6">Adyzds</div>
</div>
</li>
<li >
<div class="row">
<div class="col s4">Level:
<span>Value</span>
</div>
<div class="col s4">XP:
<span>Value</span>
</div>
</div>
</li>
</ul>
</div>
</nav>
My mouse is over the profile pic. I would like the hover effect to cover the name too. Also, I would like the Level value to be near Level.
Can anyone help me?
CSS:
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
#navbarImg{
padding-top: 10px;
max-width: 70px;
max-height: 64px;
}
#navbarLi{
max-height: 64px;
}

Answer 1

Your columns are too narrow for Level: + value. Instead of creating a row with 2 columns inside, try using seperate <li> for each:
<li >
Level: <span>7</span>
</li>
<li>
XP:<span>105</span>
</li>
As for your name, just nest it in a <a> element and materialize will know what to do with it.
Check out this fiddle: https://jsfiddle.net/pwxa6e80/3/ ... hope it helps :)