Styling menu button in tablet/mobile version

I added a “blog” button to my menu, but i have problem styling it in tablet/mobile version, screen width less than 979, (when the menu collapse).

Here my site
In width less than 979 if you then click to open the menu, the “blog” button text is underlined and when hovered get selected. I can’t find which selector need to tweak to solve this.

The actual css regarding the green button.
I added the classes btn btn-mini btn-primary, plus the personalized blog-yoga

.navbar .nav li.blog-yoga.btn {
position: relative; bottom: 0.8em;
padding: 0.2em 1.8em 0.2em 0.2em; line-height: 200%;
}
.navbar .nav li.blog-yoga.btn a {
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31);
padding: 0.2em 1em;
}
@media all and (max-width: 979px){
.navbar .nav li.blog-yoga.btn {
float: left;
margin-left: 0.8em;
margin-top: 0.8em;
}
}