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.
<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"; }