Un usuario preguntó 👇
Hola, el tiempo está cambiando del sitio con temas de Canvas sin soporte de datlas.com al tema de Storefront https://vrt1bx6kzzz.c.updraftclone.com/ y desea ajustar la altura del encabezado.
He avanzado un poco, pero no sé cómo reducir la altura de la placa base de la barra de navegación dorada.
Aquí está mi CSS (¡perdón por los nuevos errores!)
.storefront-primary-navigation, .main-navigation ul.menu ul.sub-menu {background-color: # a29261; }
/ * Masthead * / # masthead.site-header {height: 155px! Importante; margen inferior: 50px}
/ * CSS para dispositivos móviles para la pantalla Masthead * / @media solamente y (ancho máximo: 320 px) {# masthead.site-header {altura: 80 px! Importante; margen inferior: 0px; }}
/ * Menú superior del árbol * / .storefront-primary-navigation a, .cart-content a {padding: 5px 15px! Importante; }
.main-navigation .primary-navigation li a {padding: 5px 15px! importante; }
.main-navigation ul {padding: 1 1 22px 1px! importante; } .main-navigation li {altura: 80px! importante;}
/ * CSS para dispositivos móviles para el menú Masthead * / @media pantalla única y (ancho máximo: 320 px) {.main-navigation ul {background: # D6DDE4! Importante; }}
/ * Área de encabezado * / .site-header {padding-top: 0.5em; }
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {margin-bottom: -7px; }
/ * Tamaño de la barra de búsqueda * / input # woocommerce-product-search-field-0 {height: 10px; } .site-search .widget_product_search form :: before {top: 0.55em; }
¡Realmente apreciaríamos un poco de ayuda!
(@cranney)
Hace 10 meses, 2 semanas
Pudo establecer la altura del menú de navegación y ocultar el nombre de la página de título. Ahora pegue el margen de inserción debajo del menú de navegación, entre la parte inferior del menú de navegación y la parte superior del control deslizante en la página de inicio. ¡Me encantaría un poco de ayuda de la SEC! sitio web: https://vrt1bx6kzzz.c.updraftclone.com/
Aquí es donde estoy ahora con CSS. / * Color del menú de navegación * / .storefront-primary-navigation, .main-navigation ul.menu ul.sub-menu {background-color: # a29261; }
/ * .home h1.entry-title {color: # bada55; pantalla: ninguna; } * / / * Ocultar título en la página de inicio * / .home .entry-header {display: none; }
.site-header {pad-top: 1; }
/ * Masthead * / # masthead.site-header {padding-bottom: 0; }
# masthead.site-header {altura: 185px! importante; margen inferior: 20px}
.storefront-breadcrumb {padding-top: 25px; margen inferior: 1px! importante; }
/ * CSS para dispositivos móviles para la pantalla Masthead * / @media solamente y (ancho máximo: 320 px) {# masthead.site-header {altura: 90 px! Importante; margen inferior: 0px; }}
/ * Menú superior del árbol * / .storefront-primary-navigation a, .cart-content a {padding: 5px 15px! Importante; }
.main-navigation .primary-navigation li a {padding: 5px 15px! importante; }
/*.main-navigation ul {padding: 0 0 0px 0px! importante; } * / .main-navigation li {altura: 37px! importante; margen inferior: 0px; }
/ * CSS para dispositivos móviles para el menú Masthead * / @media de pantalla única y (ancho máximo: 320 px) {.main-navigation ul {background: # D6DDE4! Importante; }}
/ * Área de encabezado * / .site-header {pad-top: 8.5em; }
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {margin-bottom: -9px; }
/ * Tamaño de la barra de búsqueda * / input # woocommerce-product-search-field-0 {height: 10px; } .site-search .widget_product_search form :: before {top: 0.55em; }
/ * espacio de pie de página * / .site-footer {padding: 12px 0} .site-info {padding: 10px 0}
/ * pie de página del widget * / .footer-widgets {pad-top: 9px}
/ * reducir el relleno del título del widget * / .widget .widget-title, .widget .widgettitle {padding: 0 0 10px;}
/ * eliminar el crédito del escaparate en el pie de página * / .site-info {display: none; }
(@jarretc)
Hace 10 meses, 2 semanas
Hola, ¿estás buscando CSS como este?
.home .site-content {
margin-top: 50px;
}(@cranney)
Hace 10 meses, 2 semanas
@jarretc ¡Gracias! ¡Funcionó muy bien!
Ahora, cuando mira una versión móvil, el encabezado no se muestra correctamente, no parece responder. ¿Alguna sugerencia?
(@jarretc)
Hace 10 meses, 2 semanas
Parece tener un poco de CSS personalizado alrededor de la pantalla principal de navegación móvil. Si enfoca el CSS en la visualización del menú, ¿es mejor en un teléfono móvil?
(@cranney)
Hace 10 meses, 2 semanas
Elimino solo el CSS móvil y sigo sin mostrar un encabezado correctamente en el menú móvil o de navegación. Captura de pantalla: https://www.dropbox.com/s/e64tnopzvth8uxf/2020-03-12%2010.06.15.jpg?dl=0
Agradecería sugerencias.
Esta respuesta fue modificada hace 10 meses, hace dos semanas por.
(@jarretc)
Hace 10 meses, 1 semana
Según la SEC que tenía en el momento de esta respuesta, se debe configurar lo siguiente
@media screen and (max-width: 568px) {
#page #masthead {
background-position: top;
background-repeat: no-repeat;
background-size: contain;
height: auto !important;
padding-top: 80px;
}
.main-navigation .menu-toggle {
background-color: initial !important;
}
}(@cranney)
Hace 10 meses, 1 semana
@jarretc muchas gracias, ¡eso hizo el truco!
Este hilo se puede cerrar
¿Solucionó tu problema??
0 / 0