unholy-navigation.css

/*Nav bars are cool and funbut not part of the core
 *This file will collect different navbars and side panels - for selective use.
 *This will keep the core size down
 */

 @import "core/unholy-variables.css";

/*W3Schools navigation*/
.w3-nav {
   background-color: var(--unholy-background);
   overflow: hidden;
}
/* Style the links inside the navigation bar */
.w3-nav a {
   float: left;
   color: var(--unholy-font);
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}
/* Change the color of links on hover */
.w3-nav a:hover {
   background-color: var(--unholy-secondary);
   color: black;
}
/* Add a color to the active/current link */
.w3-nav a.active {
   background-color: var(--unholy-main);
   color: var(--unholy-font);
}

/* [ON BIG SCREEN] */
/* Wrapper */
#hamnav {
   width: 100%;
   background: var(--unholy-background);
   /* Optional */
   position: sticky;
   top: 0;
 }
 
 /* Hide Hamburger */
 #hamnav label, #hamburger { display: none; }
 
 /* Horizontal Menu Items */
 #hamitems { display: flex; }
 #hamitems a {
   width: 20%; /* 100% / 5 tabs = 20% */
   padding: 10px;
   color: var(--unholy-font);
   text-decoration: none;
   text-align: center;
 }
 #hamitems a:hover {
   background: var(--unholy-secondary);
 }
 
 #hamitems a.active {
   background-color: var(--unholy-main);
   color: var(--unholy-font);
 }
 
 /* [ON SMALL SCREENS] */
 @media screen and (max-width: 768px){
   /* Show Hamburger Icon */
   #hamnav label { 
     display: inline-block; 
     color: var(--unholy-font);
     background: var(--unholy-main);
     font-style: normal;
     font-size: 1.2em;
     padding: 10px;
   }
 
   /* Break down menu items into vertical */
   #hamitems a {
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-top: 1px solid var(--unholy-border);
   }
 
   /* Toggle Show/Hide Menu */
   #hamitems { display: none; }
   #hamnav input:checked ~ #hamitems { display: block; }
 }