I seem to be having trouble styling my navbar with semantic-ui. I want to make changes to the color and background-color on hover and when focused. However, no matter what I try, the hover effect just won't work. I was only able to achieve it using jQuery, but that doesn't feel like the right solution for this issue.
Here is the code snippet I am using:
$(document).ready(function() {
$('.main.menu').visibility({
type: 'fixed'
});
})
;a.nav.item:hover {
background: #1B1C1D;
color: #17AA1C;
}<div class="ui borderless inverted stackable main menu">
<div class="ui text container">
<div href="#" class="header item">
<i class="code icon" id="myicon"></i>
Name
</div>
<a href="#" class="nav item">Me</a>
<a href="#" class="nav item">Current Projects</a>
<a href="#" class="nav item">Blog</a>
<a href="#" class="nav item">Contact</a>
</div>
</div>