Problema espansione elemento

[Stefanuccio1926]

Salve a tutti, sono 3 giorni che sto impazzendo con un menù di wordpress.
Spiego brevemente, ho l'elemento del menù che si sovrappone a quello del template utilizzato.
Fatto sta che si dividono lo spazio. Io vorrei invece che il menù stesse sopra per prendersi tutta la larghezza.
Vi posto i css di entrambi gli elementi.
Mi auguro che qualcuno mi possa aiutare, mi scuso se sono stato poco chiaro.

Grazie anticipatamente.
Questo è il menù:

#mega_main_menu ul:after { content: ' '; display: table; clear: both; width: 100%; height: 0px; }

Questo invece è l'elemento del template:

.header_wrapper {
  width:100%;
  position:relative;
  float:left;
  z-index:1;
}
header#header .container {
  position:relative;
}
header#header .row-fluid {
  padding-top:26px;
  padding-bottom:26px;
}
header#header .row-fluid .span12 {
  height:46px
}
.header_5 header#header .row-fluid .span12{ 
  height: auto;
}

Allego anche una foto magari può aiutare a capire il tutto.
menù.jpg

[Mich_]

Se devono sovrapporsi non devono essere flottanti.
Non so se con il position:relative puoi farlo: forse si` ma con maggiore difficolta`.

In linea di massima due oggetti che devono sovrapporsi hanno posizionamento assoluto, e hanno definito l'attributo z-index (piu` alto quello che sta sopra)

[Stefanuccio1926]

in questo caso, tu dove opereresti? su entrambi i file o su uno dei 2?

Grazie per la risposta. sto davvero impazzendo per l'allineamento di questo menù!

[Mich_]

Non so cosa siano i due file di cui parli.
La cosa migliore e` se posti un link alla pagina, cosi` si puo` verificare il comportamento.

[Stefanuccio1926]

Hai ragione. il sito è www.risud.it.
Il menù principale che vedi in alto dovrebbe allinearsi a destra, ed il logo a sinistra.
Spero che così si riesca a sistemare.
Grazie ancora

[Mich_]

Questo e` il codice HTML che vedo nella tua pagina:

<div id="mega_main_menu" class="nav_menu mega_main_sidebar_menu icons-right first-lvl-align-right first-lvl-separator-smooth language_direction-ltr direction-horizontal responsive-enable mobile_minimized-enable dropdowns_animation-anim_2 version-1-1-3 include-logo no-search no-woo_cart no-buddypress">
    <div class="menu_holder">
    <div class="fullwidth_container"></div><!-- class="fullwidth_container" -->
        <div class="menu_inner">
            <span class="nav_logo">
                <a class="logo_link" href="http://www.risud.it" title="R.I. sud"><img src="http://www.risud.it/wp-content/plugins/mega_main_menu/src/img/megamain-logo-120x120.png" alt="R.I. sud" /></a>
                <a class="mobile_toggle">
                    <span class="mobile_button">
                        Menu principale &nbsp;
                        <span class="symbol_menu">&equiv;</span>
                        <span class="symbol_cross">&#x2573;</span>
                    </span><!-- class="mobile_button" -->
                </a>
            </span><!-- /class="nav_logo" -->
                <ul id="mega_main_menu_ul" class="mega_main_menu_ul"><li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-36 current_page_item menu-item-49 default_dropdown default_style drop_to_right  submenu_default_width columns1"><a href="http://www.risud.it/" class="item_link  disable_icon"><i class="im-icon-home-3"></i> <span><span class="link_text">Home</span></span></a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50 default_dropdown default_style drop_to_right  submenu_default_width columns1"><a href="http://www.risud.it/azienda/" class="item_link  disable_icon"><i class="im-icon-library"></i> <span><span class="link_text">Azienda</span></span></a></li>
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-53 default_dropdown default_style drop_to_right  submenu_default_width columns1"><a class="item_link  disable_icon"><i class="im-icon-film"></i> <span><span class="link_text">Gallery</span></span></a>
<ul class="mega_dropdown">
    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54  default_style   submenu_default_width columns"><a href="http://www.risud.it/showroom/" class="item_link  disable_icon"><i class="fa-icon-share-square"></i> <span><span class="link_text">Showroom</span></span></a></li>
    <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55  default_style   submenu_default_width columns"><a href="http://www.risud.it/progetti-3d/" class="item_link  disable_icon"><i class="fa-icon-barcode"></i> <span><span class="link_text">Progetti 3D</span></span></a></li>

</ul></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51 default_dropdown default_style drop_to_right  submenu_full_width columns1"><a href="http://www.risud.it/shop/" class="item_link  with_icon"><i class="im-icon-cart-6"></i> <span><span class="link_text">Shop</span></span></a></li>
</ul><!-- /class="mega_main_menu_ul" -->
        </div><!-- /class="menu_inner" -->
    </div><!-- /class="menu_holder" -->
</div><!-- /id="mega_main_menu" -->

Come puoi capire e` molto complesso rispetto al contenuto. E non e` neppure formattato in modo umano (sembra piu` realizzato da un CMS). Se questo e` vero, per la modifica devi capire come funziona il tuo CMS.

La logica dovrebbe essere:

<div id="mega_main_menu">
  <div id="conten_logo">
    ... qui il logo ...
  </div>
  <div id="conten_menu">
    <ul>
      <li> ...</li>
      ...
    </ul>
  </div>
</div><!-- /id="mega_main_menu" -->

Come vedi ho usato i <div> e non gli <span>: i primi sono oggetti di tipo blocco, gli <span> di tipo inline.

Dopo di che` il #conten_logo deve avere float:left e il #conten_menu float:right
Questo funziona finche` la larghezza del contenitore e` superiore alla somma dei due blocchi contenuti.

[Stefanuccio1926]

sisi hai ragione. io l'ho scritto che è worpress.
Il plugin del menù invece è mega main menu.
Diciamo che logo e menu hanno la stessa provenienza in quanto entrambi si settano con il plug in mega main menu
Quello che mi lascia perplesso è che tutto il blocco logo-menù debba dividersi la riga con l'elemento sotto.
Non riesco a capire dove intervenire per far si che il blocco logo-menu appaia al di sopra ed ovviamente a tutta larghezza!
Se gli do 150% di larghezza invece del 100% che ha di default, apparentemente risolvo il problema ma in realtà mi sposta la icone dei social che ci sono nel footer ancora più a destra e mi allarga la pagina.
Diciamo che sovrei andarmi a mettere al di sopra di quello li.

Se hai altre idee sono bene accette!

Ancora grazie per l'aiuto!

[Mich_]

Come ho scritto mi risulta difficile venire a capo di tutti gli oggetti presenti (sono circa il doppio di quelli necessari).

Comunque se forzi la larghezza a 150% vai incontro a problemi con altre risoluzioni.
Quello che devi fare e` forzare il float:left per il blocco che contiene il logo e il float:right per il menu.
Pero` i dettagli su quale oggetto devi lavorare, devi trovarteli da solo (eventualmente puoi aiutarti con gli strumenti di sviluppo dei vari brwoser).

Se invece il problema e` come usare Wordpress per fare la cosa, non e` un problema che possiamo risolvere qui, ma nel forum CMS (eventualmente dimmi che sposto la discussione).

[Stefanuccio1926]

Si in effetti sono davvero tanti!
Se non è un problema spostarla, si ti ringrazio.
Ho sbagliato io a postare qui in css generico forse.
Grazie mille per il tempo dedicato alla cosa.
Nel fratempo continuo a smanettare per cercare di risolvere.