Joomla.it Forum

Joomla! 3 => Joomla! 3 => : leti81 23 Jul 2021, 12:44:30

: [RISOLTO}Menu schermo piccolo non visualizzato correttamente
: leti81 23 Jul 2021, 12:44:30
Salve,sto lavorando al sito: brp.cnr.itHo un problema col menu quando riduco la dimensione della finestra cioè quando visualizzo il menu che si apre con le tre lineette in alto a destra: in pratica non vedo le sottovoci del menu in modo corretto, le vedo tagliate, manca la prima parte del testo a sinistra; le righe del sottomenu sono tutte spostate a sinistra e quindi non nallineate alla voce principale del menu. Non so se mi sono spiegata bene, metto una foto in allegato.

Grazie.Letizia
: Re:Menu schermo piccolo non visualizzato correttamente
: floyd1616 23 Jul 2021, 15:34:34
Ciao Letizia,
potrebbe dipendere da qualche CSS del tuo template purity_III

Inoltre ti faccio notare che, su tablet e smartphone, le voci di menu principale sono troppo vicine.  Quando si espande la voce, le sottovoci hanno un o spazio maggiore.

Considera anche il fatto che da desktop le sottovoci appaiono sull'hover della voce di menu.
Hai provato a navigare il sito dal tuo smartphone e vedere se questo non sia un problema di UX?

Ultima cosa: il colore di background delle sottovoci portalo a tutta larghezza del media. Bruttino che si interrompa così.

Saluti

Floyd



: Re:Menu schermo piccolo non visualizzato correttamente
: leti81 26 Jul 2021, 09:01:45
Grazie per la risposta.Il problema dipende sicuramente da qualche css ma non riesco ad individuare dove agire.Grazie per le altre osservazioni, devo sicuramente sistemare tutto ma prima mi preme che si leggano le sottovoci del menu in schermo piccolo.Grazie
: Re:Menu schermo piccolo non visualizzato correttamente
: leti81 26 Jul 2021, 11:51:43
Ho risolto il problema:in bootstrap.css avevo inserito il codice in rosso per centrare il sottomenu sulla voce di menu principale.
.dropdown-menu {
  position:absolute;
  top: 100%;
  right:auto;
left:50%;transform: translate (-50%,0);
 z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: center;
  list-style: none;
  background-color: #444444;
  background-clip: padding-box;
  border: 1px solid #ffffff;
  border-radius: 3px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}