/* === UNIVERSAL box-border settings === */
html {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: inherit;
}
/* ============================================================
*
* NOTE! 28 NOV 2015
*
* This is the nav styling from the minorStyle.css sheet.
* It is slightly different from the majorStyle.css sheet.
*
* ============================================================ */
.nav-bar { position: absolute; /* Test - was absolute!!! without this the nav menu does not appear when menu is open */
top: 0;
left: 0;
height: 50px;
width: 100%;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =========================================================================
*
* The nav-trigger = TEXT + ICON
*
* Following styles both of those elements
*
* ========================================================================= */
.nav-trigger { position: absolute; /* this positons the nav TEXT ONLY to the right based on right/top settings below */
/* right: 200px; Original */ /* positions the nav trigger all the way to the right side */
right: 0px; /* my code */
height: 100%;
width: 50px; /* orig was 50px */
}
/* =======================================================
*
* Following styles the nav menu TEXT only
*
* NOTE. Added the first two styles. Menu text now has space between it and the icon.
* But, the hamburger icon acts weird if it is tapped instead of the text.
* Will leave it as it is for now.
*
* ======================================================= */
.nav-trigger .menu-text { position: relative; /* 23 JULY 2018 @ 1128H. Add like CD nav system has */
right: 10px; /* 23 JULY 2018 @ 1128H. Add like CD nav system has */
color: white; /* -- orig = white -- */
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 400; /* orig was 700 */
display: none;
}
/*
* Following is our rule
* Used to change font color of nav text 'MENU' on hover
*
* -------------------------------------------------------- */
.nav-trigger .menu-text:hover { color: red; }
.nav-trigger .menu-icon:hover { display: inline-block;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 18px;
height: 2px;
background-color: white;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* ------------------------------------------------------
*
* this is the MIDDLE HORIZONTAL LINE of the menu ICON
*
* ------------------------------------------------------ */
.nav-trigger .menu-icon { display: inline-block;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 18px;
height: 2px;
background-color: red; /* orig was white */
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* ------------------------------------------------------------------------
*
* This is styling for the UPPER & LOWER HORIZONTAL LINES of the menu icon
*
* ------------------------------------------------------------------------ */
.nav-trigger .menu-icon::before,
.nav-trigger .menu-icon:after { content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: white;
right: 0;
-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
-moz-transition: -moz-transform .3s, top .3s, background-color 0s;
transition: transform .3s, top .3s, background-color 0s;
}
.nav-trigger .menu-icon::before { top: -5px; }
.nav-trigger .menu-icon::after { top: 5px; }
/*
* this makes the nav button an 'X' when clicked.
* ------------------------------------------------------ */
.nav-trigger .menu-icon.is-clicked { background-color: rgba(255, 255, 255, 0); }
.nav-trigger .menu-icon.is-clicked::before,
.nav-trigger .menu-icon.is-clicked::after { background-color: white; }
.nav-trigger .menu-icon.is-clicked::before { top: 0;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.nav-trigger .menu-icon.is-clicked::after { top: 0;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
/* ==========================================================================
*
* The primary-nav is all of our menu items which appear when menu is opened
*
* this hides the hav bar by default above the viewport
*
* ========================================================================== */
.primary-nav { position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(20, 20, 20, 0.9);
z-index: 2;
text-align: center;
padding: 50px 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: auto;
/* this fixes the buggy scrolling on webkit browsers - mobile devices only -
when overflow property is applied */
-webkit-overflow-scrolling: touch;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.primary-nav li { font-size: 22px;
font-size: 1.4rem;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: .2em 0;
}
.primary-nav a { display: inline-block;
padding: .4em 1em;
border-radius: 0.25em;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;
/* Note the following - 700 - is less bold than 'bold'. Nice!! */
font-weight: 500;
border: 1px solid transparent; /* ronpat's code */
}
/* ====================================================================
*
* Following places radiused-green border around menu itmes on hover
*
* ==================================================================== */
.primary-nav a:hover { border: 1px solid #00FF00; }
/* ==============================================================================
*
* FOLLOWING RULE :
* MAKES THE MENU ITEMS DROP DOWN ( VISIBLE ) AFTER CLICKING THE NAV MENU ICON
*
* ============================================================================== */
.primary-nav.is-visible { -webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
/*
* Following affects the color of the HOME main menu item in pre-hover state
* -------------------------------------------------------------------------- */
.primary-nav .home { color: #00FF00; }
/* ====================================================================
*
* Following rule styles font green color in pre-hover state
*
* Green indicates 'go back' from where you came
*
* ==================================================================== */
.primary-nav .goBack { color: #00FF00; }