/*HR Navigation Responsive Menu v1.3 Author : Md Hidaytullah Rahmani Located : www.github.com/hidaytrahman */ * { margin: 0; padding: 0; } /*IMPORT REQUIRED FILES*/ /* Colors*/ /* Images */ /* Dimensions */ /* Font Size */ /* Background Arrow position*/ /* Navigation Stylesheet*/ .hr-nav-wrapper { max-width: 1200px; margin: 0px auto; padding: 1%; /*background: #f3f6f7;*/ } .hr-nav-wrapper ul { padding: 0; margin: 0; } .hr-nav-wrapper ul:after { content: ""; display: block; clear: both; } .hr-nav-wrapper ul li { list-style-type: none; float: left; position: relative; } .hr-nav-wrapper ul li:hover > ul { display: block; } .hr-nav-wrapper ul li a { text-decoration: none; color: #ffffff; padding: 0.5em 1em; display: block; margin-right: 1px; font-family: arial; font-size: 15px; background: linear-gradient(#0d3758,#4ea1e4); height: 30px; } .hr-nav-wrapper ul li a:hover { background: #104057; } .hr-nav-wrapper ul li ul { display: none; position: absolute; width: 150px; } .hr-nav-wrapper ul li ul a { margin-right: 0; background: #36647a; height: auto; } .hr-nav-wrapper ul li ul li { width: 100%; } .hr-nav-wrapper ul li ul li ul { top: 0; left: 100%; } .hr-nav-wrapper ul li ul li ul a { background: #99aeb8; } .hr-toggMenu { display: none; } .hr-navigation .hrArr { position: absolute; top: 0px; color: #ffffff; right: 15%; } .hr-navigation .hrArr:after { content: ""; border-top: 5px solid #bfbfbf; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; position: absolute; top: 11px; left: 0px; } @media screen and (max-width: 768px) { /* responsive layout */ /* .hr-navigarion > height lpx lo añadí yo => la imagen del grupo no subía al replegar */ .hr-nav-wrapper { text-align: center; } .hr-nav-wrapper ul li a { height: auto; } .hr-toggMenu { display: inline-block; padding: 5px 7px; color: #ffffff; background: url('../images/menu_open.png') no-repeat; cursor: pointer; width: 25px; height: 25px; background-size: 30px; background-position: 4px; border: #0074ff; border-style: dotted; border-width: thin; border-radius: 8px; } .hr-active { background: url('../images/menu_close.png') no-repeat; background-size: 30px; background-position: 4px; } .hr-navigation { max-width: 300px; position: relative; display: none; height: 1px; } .hr-navigation.hr-fromLeft { left: -260px; display: block; max-width: 250px; } .hr-navigation .hrArr { position: absolute; top: 5px; right: 0; padding: 6px; background: url('../images/hr-arr.png') no-repeat; margin: 1px; display: inline-block; cursor: pointer; height: 7px; width: 10px; background-position: 3px -15px; background-size: 16px; background-color: rgba(0,0,0,0); } .hr-navigation .hrArr:after { display: none; } .hr-navigation ul li { float: none; width: auto !important; } .hr-navigation ul li a { margin-right: 0; border-bottom: 1px #1B6EB1 solid; padding: 8px 15px; font-size: 14px; } .hr-navigation ul li ul { position: relative; width: 100%; } .hr-navigation ul li ul li ul { left: 0; } .hr-navigation ul li:hover > ul { display: none; } .hr-navigation .hrArr-active { background: url('../images/hr-arr.png') no-repeat; background-position: 3px 2px; background-size: 16px; background-color: rgba(0,0,0,0); } }