Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display Categories in Primary Menu Conditionally
/*Using Font Awesome Icons in Genesis Navigation (Primary)
------------------------------------------------ */
.nav-primary .genesis-nav-menu .menu-item:before {
display: block;
font-family: 'FontAwesome';
font-size: 55px;
font-style: normal;
font-weight: normal;
line-height: 0;
margin: 0;
position: relative;
text-align: center;
top: 25px;
padding: 2px 0 5px;
vertical-align: top;
transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav-primary .genesis-nav-menu .menu-item:before {
color: #f1f1f1;
padding-bottom: 40px;
}
.nav-primary .genesis-nav-menu .menu-item:hover:before {
color: #ccc;
}
.nav-primary .genesis-nav-menu .current-menu-item:before {
color: #333;
}
/* customize primary menu */
.nav-primary {
background-color: darkcyan;
padding-top: 40px;
padding-bottom: 40px;
}
.nav-primary .genesis-nav-menu .menu-item {
width: 20%;
float: none;
margin: 20px auto;
padding: 0;
text-align: center;
}
.nav-primary .genesis-nav-menu a {
color: #f1f1f1;
font-weight: 100;
font-family: Noto Serif;
}
.nav-primary .genesis-nav-menu a:hover {
background: none;
color: #ccc;
}
/* customize primary menu for small screens */
@media only screen and (max-width: 768px) {
.nav-primary .genesis-nav-menu a {
text-indent: -9999px;
}
.nav-primary .genesis-nav-menu .menu-item {
width: 24%;
margin: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment