1

Buenas.

No consigo darle un width: 100% al contenedor / capa del menú en resolución smartphone. he modificado los estilos varias veces y solo lo empeoro. A parte de darle el 100% de ancho quiero centrar los textos de las opciones.

introducir la descripción de la imagen aquí

<div id="top-menu">
            <div class="container clearfix">


                <nav>
                <?php
                $menuClass = 'nav';
                    if ( 'on' == et_get_option( 'vertex_disable_toptier' ) ) $menuClass .= ' et_disable_top_tier';
                    $primaryNav = '';

                    $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );

                    if ( '' == $primaryNav ) :
                ?>
                    <ul class="<?php echo esc_attr( $menuClass ); ?>">
                        <?php if ( 'on' == et_get_option( 'vertex_home_link' ) ) { ?>
                            <li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home','Vertex' ); ?></a></li>
                        <?php }; ?>

                        <?php show_page_menu( $menuClass, false, false ); ?>
                        <?php show_categories_menu( $menuClass, false ); ?>
                    </ul>
                <?php
                    else :
                        echo( $primaryNav );
                    endif;
                ?>
                </nav>

                <?php do_action( 'et_header_top' ); ?>
            </div> <!-- .container -->
        </div> <!-- #top-menu -->


#top-menu { /*-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); */border-bottom: 1px solid #959494;position: relative; background: #25383b;height: 77px; }
    .container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
    #top-menu .container { padding: 32px 0 0; }
    #main-header .container, #pre-footer .container { text-align: center; }
        #top-menu li { display: inline-block; }
            #top-menu a { color: #fff; text-decoration: none; padding: 0 12px; display: block; }
            #top-menu nav a:hover, .description h2 a:hover { color: rgba(255, 255, 255, 0.9); }
            #top-menu li.current-menu-item > a { font-weight: 800 !important;color:#e8112d  !important;}
            #top-menu ul.nav > li > a { padding-bottom: 32px; }



.nav li ul { position:absolute; top:-999em; }
.nav li ul, .et_mobile_menu { z-index: 9999; width: 100% !important; background: #25383b; -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);box-shadow: 3px 3px 4px rgba(0,0,0,0.2); padding: 10px 0 25px; display: none; text-align: center !important; }
    .nav li { position: relative; }
        .nav ul li { float: none; }
            .nav ul a { display:block !important; float: none !important; }
.nav li:hover ul, ul.nav li.sfHover ul { left: -19px; top: 48px; }
    .nav li:hover li ul, .nav li.sfHover li ul, .nav li:hover ul, .nav li li:hover ul { top:-999em; }

.nav li li { padding: 0; height: auto !important; display: block !important; }
.nav li li ul { z-index: 1000; }
    .nav li li a:link, .nav li li a:visited, .et_mobile_menu a { display: block !important; height: auto; padding: 9px 10px 9px 30px !important; }
    .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

.nav li li:hover ul, ul.nav li li.sfHover ul { left: 0px; top: -10px; }

.nav.sf-arrows li.menu-item-has-children > a:after { content: " \00bb"; }
6
  • ¿Podrías darnos una idea de cómo se ve actualmente? Coloca una foto, o el HTML y CSS sin código PHP para que se pueda probar.
    – gugadev
    Commented el 9 oct. 2016 a las 13:36
  • ya he subido una imagen Commented el 9 oct. 2016 a las 13:49
  • ¿El menú es flotante, cierto? ¿El contenedor se ve exactamente como tu imagen o la has recortado?
    – gugadev
    Commented el 9 oct. 2016 a las 13:51
  • ¿ Estás usando Bootstrap por casualidad ? O sabes si la plantilla lo está usando?
    – David
    Commented el 9 oct. 2016 a las 15:27
  • si el menu es flotante. creo que no rodrypaladin la plantilla me parece que no usa bootstrap Commented el 9 oct. 2016 a las 15:33

2 respuestas 2

0

Te recomiendo que utilices para los menús, la propiedad position: absolute, para que te queden bien organizados y puedas manipularlos como quieras. Si vas a hacerlo de esa forma, te recomiendo tengas tambien cuidado con las propiedades que controlan la posicion porque puede traerte resultados incomodos. Un buen uso sería trabajar con valores porcentuales.

0

Darle un width del 100% a un div no tiene ningún misterio. En el 99% de los casos que no se logra hacer es porque su contenedor padre tiene alguna limitación y este no le permite crecer más.

Una buena práctica para que identifiques tu problema sería, tan simple como, ir eliminando TODOS los estilos del menú que tienes y, poco a poco, ir añadiéndole uno y otro para que vieras en qué momento y cual de las reglas interfiere con la otra que tienes y te aleja del resultado deseado.

Ese es el modo en el que mejor vas a aprender a utilizar bien el CSS.

Y si incluso ya nos pones el trozo de código html + css (solamente) podremos decirte exactamente porqué tu menú no coge todo el ancho, no se centran los textos como quieres, etc.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.