.navContainer {
width: 100%;
background: #2b2b2b;
}
.mobileLogo a {
background: none;
border: 0;
}
nav {
max-width: 1200px;
margin: auto;
box-sizing: border-box;
padding: 19px 0 20px 0;
}
/* drop down box */
nav ul {
padding: 0;
margin: 0;
}
/* remove space between topnav items */
.topNavMenuItem {
float: left;
}
/* top list of links */
nav ul li {
position: relative;
display: inline-block;
}
/* sub menu of links */
nav ul ul {
clear: both;
position: absolute;
top: 39px;
left: 0;
display: none;
width: 250px;
background: #3f3f3f;
box-shadow: -4px 4px 10px rgba(0,0,0,0.2);
-moz-box-shadow: -4px 4px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: -4px 4px 10px rgba(0,0,0,0.2);
z-index: 200;
}
nav ul ul li {
position: relative;
display: block;
padding: 20px 0;
}
/* second level sub menu of links */
nav ul ul ul {
left: 250px;
display: none;
top: 0;
}
nav a {
color: #cecece;
text-decoration: none;
padding: 19px 20px 20px 20px;
-webkit-transition: all .2s;
transition: all .2s;
font-weight: normal;
}
nav a:visited {
color: #cecece;
text-decoration: none;
}
nav a:hover {
background: black;
color: white;
text-decoration: none;
}
nav ul ul a {
width: 100%;
display: block;
margin-top: -20px;
margin-bottom: -20px;
}
/* display drop down */
nav ul li:hover > ul {
display:inherit;
}
/* mobile bar - hide */
.mobileBar {
display: none;
}
.subMenu .fa-angle-right, .subMenu .fa-angle-right {
display: none;
}
nav .fa-angle-down {
padding: 0 20px 0 10px;
}
/*
##########################################
Media Queries
##########################################
*/
@media only screen and (max-width: 850px) {
nav a {
color: white;
}
nav a:visited {
color: white;
}
.mainMenu {
position: absolute;
left: 0;
width: 300px;
z-index: 250;
}
/* header bar background color */
.navContainer {
width: 100%;
background: linear-gradient(#486A16,#314c09);
}
/* remove padding from top and bottom of nav bar */
nav {
padding: 0;
}
/* nav text link color home etc */
nav a {
color: white;
border-top: 1px solid #2b4206;
background: #4d632d;
padding: 15px;
}
/* remove nav hover color */
nav a:hover {
/*background: none;*/
background: #4d632d;
}
/* Level 2 BG color */
nav ul ul a, nav ul ul a:hover {
background: #627c3b;
}
/* Level 3 BG color */
nav ul ul ul a {
background: #7c9655;
}
/* remove float from nav items */
.topNavMenuItem {
float: none;
}
/* remove down arrows that are on drop down nav items */
nav .fa-angle-down {
display: none;
}
/* sort out alignment on subMenu items */
.subMenu, .subMenu2 {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
/* set mobile image width to 100% so it scales */
.mobileLogo img {
width: 365px;
height: auto;
margin: auto;
max-height: 57px;
}
/* align items on mobile bar */
.mobileBar {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
height: 55px;
}
.mobileLogo {
text-align: center;
padding: 10px;
}
/* burger menu */
.fa-bars, .fa-times {
font-size: 24px;
color: white;
width: 30px;
}
/* close X */
.fa-times {
padding-left: 3px;
}
/* hide the desktop 'home' link */
.desktopHome {
display: none;
}
/* hide the menu by default */
.mainMenu {
display: none;
}
/* set the nav items to be blocks rather than in a line */
nav ul li {
display: block;
}
/* make the drop down items just appear under each other */
nav ul ul {
clear: both;
display: block;
position: static;
display: none;
width: 100%;
padding: 0;
margin: 0;
}
/* remove padding from items */
nav ul ul li {
padding: 0;
}
nav ul a {
display: block;
text-decoration: none;
}
/* space the items out */
nav ul ul a {
width: calc(100% - 40px);
text-decoration: none;
display: block;
margin: 0;
}
/* disable the hover drop down */
nav ul li:hover > ul {
display: none;
}
/* code for the rotating arrow */
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* style right arrow */
.subMenu .fa-angle-right, .subMenu2 .fa-angle-right {
display: block;
float: right;
font-size: 20px;
text-decoration: none;
}
/* remove border from home and X link on mobile bar */
a.mobileHomeLink, a.mobileMenuLink {
border: 0;
background: none;
}
}
@media only screen and (max-width: 500px) {
.mobileLogo {
padding: 13px;
}
.mobileLogo img {
max-width: 90%;
}
}
@media only screen and (max-width: 400px) {
.mobileLogo {
padding: 0;
}
.mobileLogo img {
}
}