Nav submenu

bobrock4

Nav submenu

Ciao,

questo è il menu di navigazione

E' un sito montato su wordpress. Se aggiungo un submenu dall'admin panel ottengo

Il nav menu si è spostato giù, i link alle voci non sono più cliccabili e non si vedono i css sul menu utilizzando Firebug.

Come posso customizzare i submenu in questo caso?

Grazie, ciao

sideshow

Ciao, è difficile da dire senza vedere il codice e ti premetto che è solo un'ipotesi.

Però sono andata a vedere il sito seguendo il link al tuo profilo e ho notato che hai il div #crescita-web-tree in posizionamento assoluto e con un margine negativo. Forse non riesci più a cliccare le voci di menu perché ti finiscono sotto il div con la posizione assoluta (che può causare l'accavallamento sopra un div "statitc" come quello del tuo menu).

Quando aggiungi il secondo nav, che però non posso vedere dove ti si posiziona o come è fatto, è come se le proporzioni tra il div in cui c'è il logo e quello che contiene i due nav si sballassero, mandandoti "a capo" i nav, che poi, dato il margine negativo, finiscono sotto il div assoluto con la conseguenza che non riesci più a cliccare i link. Se disabiliti per un po' il margine negativo, o forse (ma non sono sicura) il posizionamento assoluto di, poi dovresti poter selezionare il menu con firebug, vedere il css, controllare le width e in genrale capire cosa non va.

E' solo un'idea, ma visto che porvarla non costa proprio niente in termini di tempo io ci proverei

miwebdesign

Ciao,
In base al tipo di modifiche puoi fare due cose:

Cercare e modificare il file del Template che genera il menu, si trova sulla cartella del tuo tema o su qualche sua sub-directory
Modificare a priori le regole CSS che vengono generate

A volte, hai bisogno di fare entrambe le cose.

Purtroppo se stavi cercando una risposta o una soluzione precisa e molto più dettagliata non è possibile fornirla dalle informazioni che ci hai postato.

bobrock4

@Sideshow said:

Ciao, è difficile da dire senza vedere il codice e ti premetto che è solo un'ipotesi.

Però sono andata a vedere il sito seguendo il link al tuo profilo e ho notato che hai il div #crescita-web-tree in posizionamento assoluto e con un margine negativo. Forse non riesci più a cliccare le voci di menu perché ti finiscono sotto il div con la posizione assoluta (che può causare l'accavallamento sopra un div "statitc" come quello del tuo menu).

Quando aggiungi il secondo nav, che però non posso vedere dove ti si posiziona o come è fatto, è come se le proporzioni tra il div in cui c'è il logo e quello che contiene i due nav si sballassero, mandandoti "a capo" i nav, che poi, dato il margine negativo, finiscono sotto il div assoluto con la conseguenza che non riesci più a cliccare i link. Se disabiliti per un po' il margine negativo, o forse (ma non sono sicura) il posizionamento assoluto di, poi dovresti poter selezionare il menu con firebug, vedere il css, controllare le width e in genrale capire cosa non va.

E' solo un'idea, ma visto che porvarla non costa proprio niente in termini di tempo io ci proverei

Ciao e grazie della risposta.

Ho scoperto che il codice del menu (anche con i link) c'è (basta che io faccio un "vedi codice sorgente"). E' molto probabile che tu abbia colto nel segno del motivo dello spostamento indesiderato. Solo che si va su un livello di conoscenza e smanettamento dei css che è un pò elevato per me..

A questo punto bisogna che io punti ad una scelta grafica relativa a quel submenu per poi farla implementare.

bobrock4

Ciao,

di sicuro le modalità di intervento sono quelle che dici.

Devo prima ipotizzare un layout grafico del menu.

In questo caso, a parte l'indesiderato spostamento verso il basso di tutto il menu, il submenu ha un font grande e nessuna altra particolare idea

Come lo tratteresti?

Grazie, ciao

sideshow

Sullo spostamento indesirato, capita questo:
il div #logo e il div #main-nav sono dentro a un div con le classi .wrapper e .clear.
La classe .wrapper definisce la larghezza del div a 920px.
Solo l'immagine dentro (float a sinstra) prende 291px. A questo punto se è troppo lungo e la somma tra la sua larghezza e quella di eccedono i 920px, finisce sotto.

un miglioramento che puoi fare da subito è questo: aumentare la min-width di #header (la trovi intorno alla riga 350 di style.css), almeno i link ti restano cliccabili.

Poi quando hai più tempo, per evitare questo genere di cose, di solito, si dà una max-width in px al wrapper e una width in percentuale ai div al suo interno, in maniera da conservare le proporzioni tra le diverse aree e garantire la stabilità delle posizioni indipendentemente dalla risoluzione del visitatore. Poi, in una fase successiva, puoi intervenire ulteriormente sulle media queries per rivedere queste posizioni a risoluzioni particolarmente basse.
Secondo me tutte queste cose le puoi fare modificando solo il file style.css, senza toccare il codice. Però come ti diceva MiWebDesign non si può dire con certezza assoluta senza avere sottomano il codice.

Prima di metterci mano, però, dovresti - come giustamente dicevi, progettare bene che risultato finale vuoi avere. Per esempio, se sai che la larghezza del tuo logo è quella e non si tocca, per avere tutte quelle voci nel menu di primo livello devi decidere che fare, perché di sicuro non ti staranno mai tutte affiancate alla destra del logo.
Se anche risolvessi il problema di incastri tra e main-nav, infatti, ti andrebbero "a capo" le ultime voci del menu, cosa che, se sono previsti sottomenù, non è esattamente il massimo.

Puoi, per esempio:

decidere per un wrapper più largo (non so, 1140px al massimo invece di 920px al massimo)
scegliere caratteri più piccoli per il nav principale
optare per una soluzione diversa: logo sopra e menu sotto (o viceversa), invece che logo e menu affiancati
togliere qualche voce non strettamente necessaria dal menu (per esempio home, visto che il link sul logo ti riporta alla home)

Per il sottomenu, a me sinceramente il font più grande di quello del menu non dispiace. Su due piedi non ho grandi idee da suggerire (la cookie law ha distrutto il mio spirito e ammazzato la mia creatività :P), se non forse quella di giocare un po' con i colori che ci sono nell'alberello delle competenze, che potresti far corrispondere alle voci di sottomenu secondo un criterio tematico.

bobrock4

Ciao Sideshow,

bella risposta, complimenti!

Non sarà semplice per me mettere mano a questo codice basandomi sulle mie competenze. Quanto meno adesso ho diverse nuovi spunti per lavorarci.

Molte grazie ciao