#title-area { float: left; height: 65px; margin-top: 20px; position: relative; width: 200px; } #title-area img { width: 100%; } #title-area .imgLogo { background: rgba(0, 0, 0, 0) url(./images/gluteninsight_logo.png) no-repeat scroll 0 0 / 97% auto; height: 60px; width: 145px; } #header { width: 100%; position: relative; height: 80px; display: flex; justify-content: center; align-items: center; padding: 0 10px; } #header > .wrap { margin: 0 auto; max-width: 1045px; width: 100%; display: flex; } @media only screen and (max-width: 769px){ #header > .wrap { flex-direction: column; } #header .widget-area.header-widget-area { margin-top: 0px; width: 100%; margin-bottom: 20px; } } #header .widget-area.header-widget-area { margin-left: auto; } /* header icon set */ .learn32 { background: url('images/header-icons/learn.png'); } #menu-gluteninsight li:nth-of-type(1):hover .learn32 { background: url('images/header-icons/learn-orange.png'); width: 30px; height: 30px; background-size: 100% auto;} .chef32 { background: url('images/header-icons/chef.png'); background-size: 90%!important; background-position: 0px 2px!important; background-repeat: no-repeat!important; } #menu-gluteninsight li:nth-of-type(2):hover .chef32 { background: url('images/header-icons/chef-orange.png'); } .basket32 { background: url('images/header-icons/basket.png'); } #menu-gluteninsight li:nth-of-type(3):hover .basket32 { background: url('images/header-icons/basket-orange.png'); width: 30px; height: 30px; background-size: 100% auto;} .searchsite32 { background: url('images/header-icons/loupe.png'); } #menu-gluteninsight li:nth-of-type(4):hover .searchsite32 { background: url('images/header-icons/loupe-orange.png'); width: 30px; height: 30px; background-size: 100% auto;} .starthere32 { background: url('images/header-icons/starthere32.png'); } #menu-gluteninsight li:nth-of-type(1):hover .starthere32 { background: url('images/header-icons/starthere-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .glutenfree32 { background: url('images/header-icons/glutenfree32.png'); } #menu-gluteninsight li:nth-of-type(2):hover .glutenfree32 { background: url('images/header-icons/glutenfree-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .celiacdisease32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease32.png'); } #menu-gluteninsight li:nth-of-type(3):hover .celiacdisease32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .recipes32 { background: url('images/header-icons/recipes32.png'); } #menu-gluteninsight li:nth-of-type(4):hover .recipes32 { background: url('images/header-icons/recipes-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .recommendations32 { background: url('images/header-icons/recommendations32.png'); } #menu-gluteninsight li:nth-of-type(5):hover .recommendations32 { background: url('images/header-icons/recommendations-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .books32 { background: url('images/header-icons/books32.png'); } #menu-gluteninsight li:nth-of-type(6):hover .books32 { background: url('images/header-icons/books-hover32.png'); width: 30px; height: 30px; background-size: 100% auto;} .menu32 { background: rgba(0, 0, 0, 0) url('images/header-icons/mobile-menu.png') no-repeat scroll 0 0 / 100% auto; height: 20px; width: 20px; margin-right: 15px; } .search32 { background: rgba(0, 0, 0, 0) url("images/header-icons/searchsite32.png") no-repeat scroll 0 0 / 100% auto; height: 20px; width: 20px; } /* end of icon header set */ /* drop down icon header set */ /* gluten free diet */ .gfdietguide32 { background: url('images/header-icons/glutenfreedietguide/gfdietguide32.png'); } #menu-gluteninsight li:nth-of-type(2) .sub-menu li:nth-of-type(1):hover .gfdietguide32 { background: url('images/header-icons/glutenfreedietguide/gfdietguide-hover32.png'); background-size: 30px 30px; } .mealplan32 { background: url('images/header-icons/glutenfreedietguide/mealplan32.png'); } #menu-gluteninsight li:nth-of-type(2) .sub-menu li:nth-of-type(2):hover .mealplan32 { background: url('images/header-icons/glutenfreedietguide/mealplan-hover32.png'); background-size: 30px 30px; } .whatiscd32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease/whatisceliacdisease32.png'); } #menu-gluteninsight li:nth-of-type(2) .sub-menu li:nth-of-type(4):hover li:nth-of-type(1):hover .whatiscd32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease/whatisceliacdisease-hover32.png'); background-size: 30px 30px; } .dh32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease/dh32.png'); } #menu-gluteninsight li:nth-of-type(2) .sub-menu li:nth-of-type(4):hover li:nth-of-type(2):hover .dh32 { background: url('images/header-icons/glutenfreedietguide/celiacdisease/dh-hover32.png'); background-size: 30px 30px; } .foodlist32 { background: url('images/header-icons/glutenfreedietguide/foodlist32.png'); } #menu-gluteninsight li:nth-of-type(2) .sub-menu li:nth-of-type(3):hover .foodlist32 { background: url('images/header-icons/glutenfreedietguide/foodlist-hover32.png'); background-size: 30px 30px; } /* gluten free diet */ /* recipes */ .breakfast32 { background: url('images/header-icons/recipes/breakfast32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(1):hover .breakfast32 { background: url('images/header-icons/recipes/breakfast-hover32.png'); background-size: 30px 30px; } .lunch32 { background: url('images/header-icons/recipes/lunch32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(2):hover .lunch32 { background: url('images/header-icons/recipes/lunch-hover32.png'); background-size: 30px 30px; } .dinner32 { background: url('images/header-icons/recipes/dinner32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(3):hover .dinner32 { background: url('images/header-icons/recipes/dinner-hover32.png'); background-size: 30px 30px; } .snacks32 { background: url('images/header-icons/recipes/snacks32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(4):hover .snacks32 { background: url('images/header-icons/recipes/snacks-hover32.png'); background-size: 30px 30px; } .dessert32 { background: url('images/header-icons/recipes/dessert32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(5):hover .dessert32 { background: url('images/header-icons/recipes/dessert-hover32.png'); background-size: 30px 30px; } .side-items32 { background: url('images/header-icons/recipes/side-items32.png'); } #menu-gluteninsight li:nth-of-type(4) .sub-menu li:nth-of-type(6):hover .side-items32 { background: url('images/header-icons/recipes/side-items-hover32.png'); background-size: 30px 30px; } /* recommended products */ .kitchen32 { background: url('images/header-icons/recommended/kitchen32.png'); } #menu-gluteninsight li:nth-of-type(5) .sub-menu li:nth-of-type(1):hover .kitchen32 { background: url('images/header-icons/recommended/kitchen-hover32.png'); background-size: 30px 30px; } .specialty32 { background: url('images/header-icons/recommended/specialty32.png'); } #menu-gluteninsight li:nth-of-type(5) .sub-menu li:nth-of-type(2):hover .specialty32 { background: url('images/header-icons/recommended/specialty-hover32.png'); background-size: 30px 30px; } .supplements32 { background: url('images/header-icons/recommended/supplements32.png'); } #menu-gluteninsight li:nth-of-type(5) .sub-menu li:nth-of-type(3):hover .supplements32 { background: url('images/header-icons/recommended/supplements-hover32.png'); background-size: 30px 30px; } .exercise32 { background: url('images/header-icons/recommended/exercise32.png'); } #menu-gluteninsight li:nth-of-type(5) .sub-menu li:nth-of-type(4):hover .exercise32 { background: url('images/header-icons/recommended/exercise-hover32.png'); background-size: 30px 30px; } /* books */ .AWL-BOOK { background: rgba(0, 0, 0, 0) url("//www.gluteninsight.com/wp-content/uploads/2016/12/awl-2.jpg") no-repeat scroll 0 0 / 100% 100%; height: 150px !important; width: 105px !important; } /* end of drop down icon header set */ /* start of Site Navigation ---------------------------------------------------------------------------------------------------- */ #menu-gluteninsight { clear: both; font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1; width: 100%; } #menu-gluteninsight .menu-item { display: inline-block; text-align: center; } #menu-gluteninsight li > a { color: #919191; display: block; font-size: 16px; font-weight: 500; padding: 9px 13px; text-decoration: none; text-transform: capitalize; } #menu-gluteninsight a:hover, #menu-gluteninsight a:focus, #menu-gluteninsight .current-menu-item > a, #menu-gluteninsight .sub-menu .current-menu-item > a:hover, #menu-gluteninsight .sub-menu .current-menu-item > a:focus { color: #788483; text-decoration: none; } #menu-gluteninsight .sub-menu { left: -9999px; margin: 0 auto; max-width: 769px; opacity: 0; position: absolute; transition: opacity 0.4s ease-in-out 0s; z-index: 99; right: 0; } #menu-gluteninsight .sub-menu a { color: #b0b0b0; font-size: 13px; padding: 0; position: relative; } #menu-gluteninsight .menu-item:hover {position: static; text-decoration:none;} #menu-gluteninsight li { cursor: pointer; } /* menu items positioning on hover */ #menu-gluteninsight > li:nth-of-type(2):hover .sub-menu { left: 0; right: 0; } #menu-gluteninsight > li:nth-of-type(2) .sub-menu li { display: table-cell; width: 1%; } #menu-gluteninsight > li:nth-of-type(3):hover .sub-menu { left: 0; right: 0; } #menu-gluteninsight > li:nth-of-type(3) .sub-menu li { float: left; width: 16.66%; } #menu-gluteninsight > li:nth-of-type(4):hover .sub-menu { left: 0; right: 0; } #menu-gluteninsight > li:nth-of-type(4) .sub-menu li { width: 1%; } #menu-gluteninsight > li:nth-of-type(5):hover .sub-menu { left: 0; right: 0; } #menu-gluteninsight > li:nth-of-type(5) .sub-menu li { width: 1%; } #menu-gluteninsight .menu-item:hover > .sub-menu { left: auto; opacity: 1; border-top: 2px solid #565555; border-radius: 8px; overflow: hidden; } #menu-gluteninsight > .first > a {padding-left: 0;} #menu-gluteninsight > .last > a {padding-right: 0;} #menu-gluteninsight .menu-item:focus { position: static; } #menu-gluteninsight .menu-item > a:focus + ul.sub-menu, #menu-gluteninsight .menu-item.sfHover > ul.sub-menu { left: 0; opacity: 1; } .site-header #menu-gluteninsight li li { margin-left: 0; } .nav-primary,.nav-secondary { border-bottom: 1px solid #eee; } #menu-gluteninsight i { background-size: 100% auto; display: block; height: 30px; margin: 0px auto 15px; width: 30px; font-size: 30px; background-repeat: no-repeat; padding-top: 7px; } #menu-gluteninsight li:hover > a { color: #f78c49; } #menu-gluteninsight .menu-item:hover a:hover { color: #f78c49; } #menu-gluteninsight .sub-menu .menu-item { background: #4a4a4a none repeat scroll 0 0; display: table-cell; padding: 15px 25px; } #menu-gluteninsight .sub-menu li > i { display: none; } #menu-gluteninsight .sub-menu li > .hasIcon { background-repeat: no-repeat; background-size: 90% auto; display: block; margin-bottom: 10px; } /* menu depth down to 3rd */ #menu-gluteninsight > li > .sub-menu > li > .sub-menu { margin-top: 23px; } /* end of menu depth 3rd */ .mobile_menu_container, .mobile_menu_icons, .mobile_search { display: none; } @media only screen and (max-width: 1046px) { #header { height: auto; display: inline-block; } #title-area .imgLogo { margin: 0 auto; position: relative; } } /* MOBILE SITE NAVIGATION */ @media only screen and (max-width: 846px) { #header { padding: 0; } .menu-gluteninsight-container:first-child { display: none; } #title-area { margin-bottom: 25px; padding-left: 6%; padding-right: 6%; width: 100%; } #title-area > a { float: left; } #title-area .imgLogo { left: 27px;margin: unset !important; position: absolute; width: 150px; background-size: 84%!important; } .mobile_menu_container, .mobile_menu_icons{ display: block; } .mobile_menu_icons { float: right; padding-top: 20px; } .mobile_menu_icons .search32, .mobile_menu_icons .menu32 { float: left; cursor: pointer; } .mobile_menu_container { display: none; } .mobile_menu li { list-style: outside none none; } .mobile_menu li a { color: #cbcbcb; font-size: 14px; } .mobile_menu_container { background: #1f1f1f none repeat scroll 0 0; } .mobile_menu > .menu > li { border-bottom: 1px solid #313131; list-style: outside none none; margin-left: 28px; margin-right: 28px; padding: 10px 0; text-align: left; } .mobile_menu .menu { padding-bottom: 10px; padding-top: 10px; } .mobile_menu .sub-menu { padding-left: 20px; } .mobile_menu .sub-menu li { padding: 10px 0; } .mobile_search { background: #1f1f1f none repeat scroll 0 0; padding: 20px; } .mobile_search input { background: #393939 none repeat scroll 0 0; border: medium none; border-radius: 2px; color: #fff; font-weight: 500; padding: 10px; width: 94%; } .fullview_close { display: none; } } /* end of Site Navigation ---------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .fullview { background: #fff none repeat scroll 0 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .fullview form { margin: 0 auto; max-width: 1049px; } .fullview input { border: 0 none; color: #303030; font-size: 2rem; font-weight: 500; margin-top: 26px; text-transform: uppercase; width: 65%; float: left; } .fullview_close { color: #b1b1b1; float: right; font-size: 2rem; margin-top: 25px; } } @media only screen and (min-width: 768px) and (max-width: 960px) { .fullview form { margin: 0 auto; max-width: 1049px; padding-left: 20px; padding-right: 30px; padding-top: 30px; } } /* mobile menu down arrow div */ .toggleMenu { float: right; } .toggleMenu:hover { cursor: pointer; } /**/