#header { position: relative; width: 100%; background-color: #000; margin: 0px; padding: 10px 0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; #logo { z-index: 2; margin: 0px; display: inline-block; width: 30%; margin-bottom: -25px; vertical-align: bottom; text-align: left; img { z-index: 39; width: 100%; } } h1 { margin: 0px; padding: 0px; font-size: 1.65em; } img { margin: 0; padding: 0; background-image: none; } } #header .top-bar { display: flex; justify-content: flex-end; background-color: #000; font-size: 13px; padding: 10px; padding-bottom: 0px; font-family: "Roboto Condensed", sans-serif; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; height: 27px; overflow: hidden; i { color: #fff; opacity: 0.6; padding: 0px 10px; font-size: 15px; padding-right:0px; } a { color: rgba(255, 255, 255, 0.7); } } #header .main-content { display: flex; justify-content: space-between; align-items: flex-end; li { display: inline-block; text-transform: uppercase; font-family: "Roboto Condensed", sans-serif; padding: 3px 15px; } li a:hover, li a.active { border-bottom: 1px solid #fd0; } li a { padding-bottom: 5px; color: rgba(255,255,255,0.7); } } #mobile_menu{ z-index:900; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.9); color:white; padding:20px; display:none; .mobile_second_menu{ padding:10px 0; ul{ margin:0; list-style:none; li{display:inline-block; margin:4px 10px; margin-left:0; } a{color:white;} } } .mobile_first_menu{ margin-top:20px; font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; color:white; ul{ margin:0; list-style:none; li{display:block; padding:5px 0; } a{color:white;} } } } #burger_menu{ z-index:1000; top:5px; right:5px; bottom:inherit; display: none !important; } @media screen and (max-width: 1170px) { #header .top-bar { display: none; } } @media screen and (max-width: 740px) { #header #burger_menu { display: block !important; } #header .menus { display: none; } }