/* Theme Name: Goodnews Child Description: Child Theme - you can use child theme to make a lot of customization that's not gonna be deleted with any new theme update Version: 1.0 Author: Momizat Team Author URI: http://www.momizat.com Template: goodnews5 */ /*--------------------------------- Add your custom styles here ---------------------------------*/ /*--------------------------------- Menú adicional bajo navegación principal ---------------------------------*/ #additional-navigation { background: #fff; border-bottom: 1px solid #dfdfdf; clear: both; height: 45px; line-height: 44px; position: relative; z-index: 109; } #additional-navigation .navigation-inner { height: 44px; background: #f0f0f0; border-bottom: 1px solid #dfdfdf; position: relative; } #additional-navigation .navigation-inner > .inner { position: relative; height: 44px; } #additional-navigation ul.main-menu { height: 44px; margin: 0; padding: 0; list-style: none; } #additional-navigation .main-menu li:not(.mom_mega) { position: relative; } #additional-navigation .main-menu > li { float: left; font-size: 15px; border: 0 solid #dfdfdf; border-left-width: 1px; } #additional-navigation .main-menu > li:last-child { border-right: 1px solid #dfdfdf; } #additional-navigation .main-menu > li > a { padding: 0 15px; color: #373c43; line-height: 44px; height: 44px; display: block; position: relative; } #additional-navigation .main-menu > li:hover > a, #additional-navigation .main-menu > li.current-menu-item > a, #additional-navigation .main-menu > li.current-menu-ancestor > a, #additional-navigation .main-menu > li.current-menu-parent > a { background-color: #fff; } #additional-navigation .main-menu > li:hover > a:before, #additional-navigation .main-menu > li.current-menu-item > a:before, #additional-navigation .main-menu > li.current-menu-ancestor > a:before, #additional-navigation .main-menu > li.current-menu-parent > a:before { content: ''; position: absolute; width: 100%; height: 1px; background: #fff; left: 0; bottom: -1px; } /* Corrección de desplegables: ocultos hasta pasar el ratón. */ #additional-navigation ul.main-menu li:not(.mom_mega):not(.mom_mega_cats) > ul.sub-menu { display: none; opacity: 0; visibility: hidden; } #additional-navigation ul.main-menu li:not(.mom_mega):not(.mom_mega_cats):hover > ul.sub-menu { display: block; opacity: 1; visibility: visible; } /* Asegura que los desplegables queden por encima del contenido. */ #additional-navigation .main-menu ul.sub-menu { z-index: 1200; } /* El nuevo menú es una segunda barra de escritorio. El menú móvil de GoodNews continúa gestionándose con las ubicaciones Mobile main / Mobile top. */ @media only screen and (max-width: 1000px) { #additional-navigation { display: none; } } /*--------------------------------- Menú principal: estados visuales ---------------------------------*/ /* Barra principal: gris oscuro. */ #navigation, #navigation .navigation-inner, #navigation .navigation-inner > .inner { background-color: #3A3A3A !important; } /* ESTADO NORMAL: fondo gris oscuro y texto/iconos blancos. */ #navigation ul.main-menu > li > a, #navigation ul.main-menu > li > a:link, #navigation ul.main-menu > li > a:visited, #navigation ul.main-menu > li > a *, #navigation ul.main-menu > li.menu-item-has-children > a:after { color: #FFFFFF !important; } /* HOVER: fondo blanco y texto/iconos negros. */ #navigation ul.main-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current-post-parent):hover > a { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } #navigation ul.main-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current-post-parent):hover > a *, #navigation ul.main-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current-post-parent):hover > a:after { color: #111111 !important; } #navigation ul.main-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current-post-parent):hover > a:before { background: #FFFFFF !important; background-color: #FFFFFF !important; } /* * ELEMENTO ACTIVO: colores invertidos. * Fondo blanco y texto, iconos y flecha en negro. */ #navigation ul.main-menu > li.current-menu-item > a, #navigation ul.main-menu > li.current_page_item > a, #navigation ul.main-menu > li.current-menu-ancestor > a, #navigation ul.main-menu > li.current-menu-parent > a, #navigation ul.main-menu > li.current_page_parent > a, #navigation ul.main-menu > li.current-post-parent > a, #navigation ul.main-menu > li.current-menu-item:hover > a, #navigation ul.main-menu > li.current_page_item:hover > a, #navigation ul.main-menu > li.current-menu-ancestor:hover > a, #navigation ul.main-menu > li.current-menu-parent:hover > a, #navigation ul.main-menu > li.current_page_parent:hover > a, #navigation ul.main-menu > li.current-post-parent:hover > a { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } #navigation ul.main-menu > li.current-menu-item > a *, #navigation ul.main-menu > li.current_page_item > a *, #navigation ul.main-menu > li.current-menu-ancestor > a *, #navigation ul.main-menu > li.current-menu-parent > a *, #navigation ul.main-menu > li.current_page_parent > a *, #navigation ul.main-menu > li.current-post-parent > a *, #navigation ul.main-menu > li.current-menu-item > a:after, #navigation ul.main-menu > li.current_page_item > a:after, #navigation ul.main-menu > li.current-menu-ancestor > a:after, #navigation ul.main-menu > li.current-menu-parent > a:after, #navigation ul.main-menu > li.current_page_parent > a:after, #navigation ul.main-menu > li.current-post-parent > a:after { color: #111111 !important; } /* Mantiene blanca la pequeña línea inferior del elemento activo. */ #navigation ul.main-menu > li.current-menu-item > a:before, #navigation ul.main-menu > li.current_page_item > a:before, #navigation ul.main-menu > li.current-menu-ancestor > a:before, #navigation ul.main-menu > li.current-menu-parent > a:before, #navigation ul.main-menu > li.current_page_parent > a:before, #navigation ul.main-menu > li.current-post-parent > a:before { background: #FFFFFF !important; background-color: #FFFFFF !important; } /*--------------------------------- Menú adicional: gris #666666 y estados invertidos ---------------------------------*/ #additional-navigation, #additional-navigation .navigation-inner, #additional-navigation .navigation-inner > .inner { background: #666666 !important; background-color: #666666 !important; } /* Estado normal: fondo gris y texto/iconos blancos. */ #additional-navigation ul.main-menu > li > a, #additional-navigation ul.main-menu > li > a:link, #additional-navigation ul.main-menu > li > a:visited, #additional-navigation ul.main-menu > li > a *, #additional-navigation ul.main-menu > li.menu-item-has-children > a:after { background: #666666 !important; background-color: #666666 !important; color: #FFFFFF !important; } /* Hover: fondo blanco y texto/iconos negros. */ #additional-navigation ul.main-menu > li:hover > a, #additional-navigation ul.main-menu > li:hover > a:link, #additional-navigation ul.main-menu > li:hover > a:visited { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } #additional-navigation ul.main-menu > li:hover > a *, #additional-navigation ul.main-menu > li:hover > a:after { color: #111111 !important; } /* Elemento seleccionado/activo: fondo blanco y texto/iconos negros. */ #additional-navigation ul.main-menu > li.current-menu-item > a, #additional-navigation ul.main-menu > li.current_page_item > a, #additional-navigation ul.main-menu > li.current-menu-ancestor > a, #additional-navigation ul.main-menu > li.current-menu-parent > a, #additional-navigation ul.main-menu > li.current_page_parent > a, #additional-navigation ul.main-menu > li.current-post-parent > a, #additional-navigation ul.main-menu > li.current-menu-item:hover > a, #additional-navigation ul.main-menu > li.current_page_item:hover > a, #additional-navigation ul.main-menu > li.current-menu-ancestor:hover > a, #additional-navigation ul.main-menu > li.current-menu-parent:hover > a, #additional-navigation ul.main-menu > li.current_page_parent:hover > a, #additional-navigation ul.main-menu > li.current-post-parent:hover > a { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } #additional-navigation ul.main-menu > li.current-menu-item > a *, #additional-navigation ul.main-menu > li.current_page_item > a *, #additional-navigation ul.main-menu > li.current-menu-ancestor > a *, #additional-navigation ul.main-menu > li.current-menu-parent > a *, #additional-navigation ul.main-menu > li.current_page_parent > a *, #additional-navigation ul.main-menu > li.current-post-parent > a *, #additional-navigation ul.main-menu > li.current-menu-item > a:after, #additional-navigation ul.main-menu > li.current_page_item > a:after, #additional-navigation ul.main-menu > li.current-menu-ancestor > a:after, #additional-navigation ul.main-menu > li.current-menu-parent > a:after, #additional-navigation ul.main-menu > li.current_page_parent > a:after, #additional-navigation ul.main-menu > li.current-post-parent > a:after { color: #111111 !important; } /* La línea inferior acompaña al fondo blanco en hover y activo. */ #additional-navigation ul.main-menu > li:hover > a:before, #additional-navigation ul.main-menu > li.current-menu-item > a:before, #additional-navigation ul.main-menu > li.current_page_item > a:before, #additional-navigation ul.main-menu > li.current-menu-ancestor > a:before, #additional-navigation ul.main-menu > li.current-menu-parent > a:before, #additional-navigation ul.main-menu > li.current_page_parent > a:before, #additional-navigation ul.main-menu > li.current-post-parent > a:before { background: #FFFFFF !important; background-color: #FFFFFF !important; } /*--------------------------------- Flecha del menú adicional La zona de la flecha acompaña al estado del elemento. ---------------------------------*/ /* Estado normal: fondo #666666 y flecha blanca. */ #additional-navigation ul.main-menu > li.menu-item-has-children > a:after { background: #666666 !important; background-color: #666666 !important; color: #FFFFFF !important; } /* Hover: fondo blanco y flecha negra. */ #additional-navigation ul.main-menu > li.menu-item-has-children:hover > a:after { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } /* Activo/seleccionado: fondo blanco y flecha negra. */ #additional-navigation ul.main-menu > li.menu-item-has-children.current-menu-item > a:after, #additional-navigation ul.main-menu > li.menu-item-has-children.current_page_item > a:after, #additional-navigation ul.main-menu > li.menu-item-has-children.current-menu-ancestor > a:after, #additional-navigation ul.main-menu > li.menu-item-has-children.current-menu-parent > a:after, #additional-navigation ul.main-menu > li.menu-item-has-children.current_page_parent > a:after, #additional-navigation ul.main-menu > li.menu-item-has-children.current-post-parent > a:after { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } /*--------------------------------- Espaciado de iconos en el menú adicional Igual que en el menú principal de GoodNews. ---------------------------------*/ #additional-navigation .main-menu li a i { font-size: 16px; float: left; position: relative; margin-right: 8px; line-height: inherit; top: 1px; } #additional-navigation .main-menu li ul li a i { top: -1px; } /* Iconos de la familia Brankic usan el mismo ajuste que GoodNews. */ #additional-navigation .main-menu li a i[class*="brankic"] { font-size: 18px; margin-right: 6px; position: relative; top: -1px; } #additional-navigation .main-menu li ul li a i[class*="brankic"] { top: -3px; } /* Los iconos configurados como "solo icono" no necesitan separación. */ #additional-navigation .main-menu li a i.icon_only, #additional-navigation .main-menu li a i.icon_only[class*="brankic"] { margin-right: 0; } /* Conserva el tratamiento especial de la flecha de los mega-menús. */ #additional-navigation .main-menu li a i.mega_menu_arrow_holder { margin-right: 5px; } /*--------------------------------- Color de iconos del menú adicional Fuerza también el pseudo-elemento que dibuja el icono. ---------------------------------*/ /* Estado normal: iconos blancos. */ #additional-navigation ul.main-menu > li > a i, #additional-navigation ul.main-menu > li > a i:before { color: #FFFFFF !important; } /* Hover: fondo blanco e iconos negros. */ #additional-navigation ul.main-menu > li:hover > a i, #additional-navigation ul.main-menu > li:hover > a i:before { color: #111111 !important; } /* Activo/seleccionado: fondo blanco e iconos negros. */ #additional-navigation ul.main-menu > li.current-menu-item > a i, #additional-navigation ul.main-menu > li.current-menu-item > a i:before, #additional-navigation ul.main-menu > li.current_page_item > a i, #additional-navigation ul.main-menu > li.current_page_item > a i:before, #additional-navigation ul.main-menu > li.current-menu-ancestor > a i, #additional-navigation ul.main-menu > li.current-menu-ancestor > a i:before, #additional-navigation ul.main-menu > li.current-menu-parent > a i, #additional-navigation ul.main-menu > li.current-menu-parent > a i:before, #additional-navigation ul.main-menu > li.current_page_parent > a i, #additional-navigation ul.main-menu > li.current_page_parent > a i:before, #additional-navigation ul.main-menu > li.current-post-parent > a i, #additional-navigation ul.main-menu > li.current-post-parent > a i:before { color: #111111 !important; } /*--------------------------------- Corrección definitiva de iconos del menú adicional El icono forma parte del mismo fondo del elemento; no lleva un rectángulo/fondo independiente. ---------------------------------*/ #additional-navigation ul.main-menu > li > a i, #additional-navigation ul.main-menu > li > a i:before { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Estado normal */ #additional-navigation ul.main-menu > li > a i, #additional-navigation ul.main-menu > li > a i:before { color: #FFFFFF !important; } /* Hover */ #additional-navigation ul.main-menu > li:hover > a, #additional-navigation ul.main-menu > li:hover > a i, #additional-navigation ul.main-menu > li:hover > a i:before { color: #111111 !important; } #additional-navigation ul.main-menu > li:hover > a { background: #FFFFFF !important; background-color: #FFFFFF !important; } /* Activo / seleccionado */ #additional-navigation ul.main-menu > li.current-menu-item > a, #additional-navigation ul.main-menu > li.current_page_item > a, #additional-navigation ul.main-menu > li.current-menu-ancestor > a, #additional-navigation ul.main-menu > li.current-menu-parent > a, #additional-navigation ul.main-menu > li.current_page_parent > a, #additional-navigation ul.main-menu > li.current-post-parent > a { background: #FFFFFF !important; background-color: #FFFFFF !important; color: #111111 !important; } #additional-navigation ul.main-menu > li.current-menu-item > a i, #additional-navigation ul.main-menu > li.current-menu-item > a i:before, #additional-navigation ul.main-menu > li.current_page_item > a i, #additional-navigation ul.main-menu > li.current_page_item > a i:before, #additional-navigation ul.main-menu > li.current-menu-ancestor > a i, #additional-navigation ul.main-menu > li.current-menu-ancestor > a i:before, #additional-navigation ul.main-menu > li.current-menu-parent > a i, #additional-navigation ul.main-menu > li.current-menu-parent > a i:before, #additional-navigation ul.main-menu > li.current_page_parent > a i, #additional-navigation ul.main-menu > li.current_page_parent > a i:before, #additional-navigation ul.main-menu > li.current-post-parent > a i, #additional-navigation ul.main-menu > li.current-post-parent > a i:before { background: transparent !important; background-color: transparent !important; color: #111111 !important; border: 0 !important; box-shadow: none !important; }