/* ==========================================
RESET
===========================================*/
* {
box-sizing: border-box;
list-style-type: none;
padding: 0;
margin: 0;
text-decoration: none;
}
/*====================================
BASE STYLES
====================================*/
body {
background: #333;
}
* {
font-family: 'Vollkorn', Arial, serif;
font-size: 1em;
}
/*====================================
HEADER STYLES
====================================*/
header {
background: #e9e9e9;
box-shadow: 0px -3px 15px 2px;
}
.header-container {
width: 100%;
margin: auto;
display: flex;
flex-direction: column; /* Logo starts stacked on top of nav */
align-items: center;
}
.logo {
max-width: 120px;
max-height: 120px;
margin-top: 10px;
}
/*====================================
MENU STYLES
====================================*/
.main-menu {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 25px; /* Space for logo */
overflow: visible;
max-width: 700px; /* Keeps the buttons getting too far from each other on largest screens */
}
.main-menu a {
width: 100%;
text-align: center;
padding: .75em 1em;
display: block;
color: #222;
border-bottom: 2px solid #ddd;
}
.main-menu a:hover {
color: #c14400;
border-bottom-color: #c14400;
}
/*====================================
DROPDOWN MENU STYLES
====================================*/
/* The hidden-at-first drop menus */
.drop-menu {
display: flex;
flex-direction: column; /* This never changes */
align-items: center;
width: 100%; /* Allows sub buttons to stretch across button width in main-menu*/
transition: max-height .4s, opacity .3s;
max-height: 0;
opacity: 0;
overflow: hidden; /* Keeps links in drop menu from displaying until height is large enough */
}
.drop-menu > .menu-button {
height: 100%;
transition: transform .4s;
transform: translateY(-300%);
background: #aaa; /* Makes the menu effects visible on close */
}
/* Makes for easy identifying when the drop menu is open */
.dropdown-wrapper:hover > .menu-button {
color: #c14400;
background: #333;
}
/* The dropdown-wrapper wraps both the .main-menu button and drop down menu */
/* Expands .drop-menu to children height, not setting an expicit height allows variable # of buttons */
.dropdown-wrapper:hover .drop-menu{
max-height: 300px;
opacity: 1;
}
/* The specifity keeps styles from affecting main menu button */
.dropdown-wrapper:hover > .drop-menu .menu-button {
transform: translateY(0%);
}
/*====================================
MEDIA QUERIES
====================================*/
@media (min-width: 550px) {
/*====================================
DROP-MENU EFFECTS (LARGER SCREENS)
====================================*/
/* Resets dropdown styles to not affect the effects. Overflow still set to hidden allows for menu effects like sliding in */
.effect {
transition: max-height 0s;
opacity: 1;
background: transparent;
}
.effect .menu-button {
transform: translateY(0%);
}
.scissor .menu-button{
transform: translateX(-100%);
}
/* Selects every other menu button to slide the opposite way */
.scissor .menu-button:nth-child(2n+1) {
transform: translateX(100%);
}
.dropdown-wrapper:hover .scissor .menu-button {
transform: translateX(0%);
}
.fade-in .menu-button {
transition: opacity .5s;
opacity: 0;
}
.dropdown-wrapper:hover .fade-in .menu-button {
opacity: 1;
}
.header-container {
width: 90%;
}
.header-container {
height: 200px;
justify-content: space-between; /* Pushes logo to top, nav bar all the way down */
}
.main-menu {
flex-direction: row; /* Horizontal main menu buttons */
align-items: flex-start; /* Makes the top of the 'dropdown-wrapper' div stay flush with button top because it's aligned on the cross-axis */
height: 48px; /* Setting the height allows the dropdown outside of it's parent's bounds, therefore not compensated for by the flex. */
margin: 0;
}
.main-menu > .menu-button {
width: 23%;
max-width: 150px;
}
.logo {
max-width: 130px;
max-height: 130px;
margin-top: 15px;
}
}
@media (min-width: 850px) {
.header-container {
flex-direction: row; /* Places logo on the same line as .main-menu */
justify-content: space-around;
height: 160px;
}
.main-menu {
width: 60%;
justify-content: space-between;
}
.logo {
margin: 0;
}
}
