Supporto » Aspetto = Temi » Personalizzare stile menu a tendina

  • Risolto silvia74

    (@silvia74)


    Ciao
    Vorrei personalizzare lo stile del sottoelemento nel menu a tendina. Uso ocean wp e come potete vedere il sottoelemento risulta lontanissimo dalla voce di menù.
    Come risolvo?
    Grazie

    La pagina su cui ho bisogno di aiuto: [devi essere connesso per vedere il link]

Stai visualizzando 10 risposte - dal 1 al 10 (di 10 totali)
  • Ciao @silvia74,
    se stai usando la versione free del tema, devi sovrascrivere una regola CSS per poter avvicinare il sottomenu al menu principale.

    la regola è questa

    .sf-menu ul.sub-menu {
        top: 100%;
    }

    Devi scriverla in Aspetto > Personalizza > CSS aggiuntivo e modificare il valore 100% (impostazione predefinita) col valore che ti occorre, diminuendo la percentuale (es. 60%).

    Se stai usando la versione a pagamento ti consiglio di leggere la documentazione https://docs.oceanwp.org/ oppure contattare il forum di supporto dedicato agli utenti premium

    Facci sapere

    Chi ha creato la discussione silvia74

    (@silvia74)

    grazie per la risposta, ma non funziona. può essere dovuto che nel css aggiuntivo ho già inserito il codice per la top bar personalizzata?
    Sto usando la versione free di ocean wp

    • Questa risposta è stata modificata 3 mesi, 3 settimane fa da silvia74.

    Ciao @silvia74,
    prova ad aggiungere !important alla regola.
    Es

    .sf-menu ul.sub-menu {
        top: 60% !important;
    }
    Chi ha creato la discussione silvia74

    (@silvia74)

    Niente. questo è il codice che ho nel css aggiuntivo; avevo la top bar personalizzata , ora ho aggiunto il codice che mi hai dato tu per le voci a menù ma niente restano staccatissime. L’impressione è che questa distanza in qualche modo dipenda dall’altezza dell’header in quanto le voci coincidono con il bordo inferiore dell’header… ma non posso diminuirlo altrimenti mi rimpicciolisce troppo il logo o me lo taglia…

    .top-bar-content {
    	display: grid;
    	grid-template-columns: 1fr 3fr 1fr;
    	grid-gap: -15px;
    	margin-bottom: -20px;
    	background-color: #EDFCEB;
    }
    
    #top-bar-wrap {
    	padding-bottom: 5px;
    	border-bottom: 1px solid #333
      !important; 
    	margin: 0 0 0 0px;
    }
    
    .img {
    	width: 30%;
    	margin-top:2px;
    	margin-left:5px 
    	margin-bottom: 15px
    }
    
    .icons {
    	display: grid;
    	grid-template-columns: 3fr 2fr 2fr;
    	grid-gap: -15px;
    	justify-self: right;
    }
    
    .icon-adress,
    .icon-hours,
    .icon-iphone {
    	display: flex;
    }
    
    .adress p,
    .hours p,
    .phone p {
    	margin: 0;
    	font-family: 'Montserrat', sans-serif;
    	font-size: 10px;
    }
    
    .icon-adress i,
    .icon-hours i,
    .icon-iphone i {
    	font-size: 30px;
    	color: #009442;
    	margin: 5px 15px 0 0;
    }
    
    .adress span,
    .hours span,
    .phone span {
    	font-family: 'Montserrat', sans-serif
    	font-size: 12px;
    	color: #009442;
    	font-weight: 600:
    }
    
    /* Styling Social Icons */
    .social-icons ul{
    	list-style: none;
    	display:flex
    	justify-content: end;
    	font-size: 20px;
    	margin: 0 0 0 10px
    }
    
    .social-icons ul li i {
    	color: #050c23;
    }
    .social-icons ul li i:hover {
    	color: #e3872d;
    	transition: .3s;
    }
    .social-icons ul li:nth-child(-n+4) {
    	margin-right: 20px;
    }
    
    /* Query */
    @media screen and (max-width:1024px)  and {
    	.icon-adress i,
    	.icon-hours i,
    	.icon-iphone i,
    		font-size: 35px;
    		margin: 10px;
    }
      .adress span,
    	.phone span,
    	.hours span {
    		font-size: 12px;
    		margin: 0 0 0 0px;
    }
    	.social-icons ul {
    		font-size: 16px;
    		margin: 50 0 0 0px !important;
    }
    
    @media screen and (max-width:768px){       .social-icons {
    		display: none;
    	}
    	
      .top-bar-content {
    	display: flex;
    	flex-direction: column;
    	}
    	
    	.icons  {
    	 justify-self: end;
    	 }
    
    	
    @media screen and (max-width:500px){       .top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    	
      .top-bar-content i {
    	display: none;
    	 }
    	
    @media screen and (max-width:320px){       .top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    	
    	.img {
    	width: 10%;
    	margin-top:1px;
    	margin-left:25px 
    	margin-bottom: 15px
    }
    	
    .sf-menu ul.sub-menu {
        top: 60% !important;
    }

    Ciao @silvia74,
    forse ho capito.
    Nel codice che hai scritto ci sono diversi errori. Alcune proprietà non hanno il ; di chiusura dell’istruzione e non hai chiuso correttamente le parentesi graffe delle media query. Altre istruzioni sono seguite dai : invece che dal ;

    Attenzione questa porzione di codice è completamente sballata.
    Hai lasciato un and vagamente e non hai aperto le graffe dopo i selettori (l’ho modificato come credevo andasse fatto, ma aggiustalo secondo le tue esigenze)

    /* Query */
    @media screen and (max-width:1024px)  <strong>and</strong><em> {
    	.icon-adress i,
    	.icon-hours i,
    	<strong>.icon-iphone i,</strong></em>
    		font-size: 35px;
    		margin: 10px;
    }

    Tutto il codice corretto è:

    .top-bar-content {
    	display: grid;
    	grid-template-columns: 1fr 3fr 1fr;
    	grid-gap: -15px;
    	margin-bottom: -20px;
    	background-color: #EDFCEB;
    }
    
    #top-bar-wrap {
    	padding-bottom: 5px;
    	border-bottom: 1px solid #333
      !important;
    	margin: 0 0 0 0px;
    }
    
    .img {
    	width: 30%;
    	margin-top:2px;
    	margin-left:5px;
    	margin-bottom: 15px;
    }
    
    .icons {
    	display: grid;
    	grid-template-columns: 3fr 2fr 2fr;
    	grid-gap: -15px;
    	justify-self: right;
    }
    
    .icon-adress,
    .icon-hours,
    .icon-iphone {
    	display: flex;
    }
    
    .adress p,
    .hours p,
    .phone p {
    	margin: 0;
    	font-family: 'Montserrat', sans-serif;
    	font-size: 10px;
    }
    
    .icon-adress i,
    .icon-hours i,
    .icon-iphone i {
    	font-size: 30px;
    	color: #009442;
    	margin: 5px 15px 0 0;
    }
    
    .adress span,
    .hours span,
    .phone span {
    	font-family: 'Montserrat', sans-serif;
    	font-size: 12px;
    	color: #009442;
    	font-weight: 600;
    }
    
    /* Styling Social Icons */
    .social-icons ul{
    	list-style: none;
    	display:flex;
    	justify-content: end;
    	font-size: 20px;
    	margin: 0 0 0 10px;
    }
    
    .social-icons ul li i {
    	color: #050c23;
    }
    .social-icons ul li i:hover {
    	color: #e3872d;
    	transition: .3s;
    }
    .social-icons ul li:nth-child(-n+4) {
    	margin-right: 20px;
    }
    
    /* Query */
    @media screen and (max-width:1024px) {
    	.icon-adress i,
    	.icon-hours i,
    	.icon-iphone i{
    		font-size: 35px;
    		margin: 10px;
    }
      .adress span,
    	.phone span,
    	.hours span {
    		font-size: 12px;
    		margin: 0 0 0 0px;
    }
    	.social-icons ul {
    		font-size: 16px;
    		margin: 50 0 0 0px !important;
    }
    
    @media screen and (max-width:768px){
    	.social-icons {
    		display: none;
    	}
    
      .top-bar-content {
    	display: flex;
    	flex-direction: column;
    	}
    
    	.icons  {
    	 justify-self: end;
    	 }
    }
    
    @media screen and (max-width:500px){
    	.top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    
      .top-bar-content i {
    	display: none;
    	 }
    }
    @media screen and (max-width:320px){
    	.top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    
    	.img {
    	width: 10%;
    	margin-top:1px;
    	margin-left:25px;
    	margin-bottom: 15px;
    }
    
    .sf-menu ul.sub-menu {
        top: 60% !important;
    }

    Provalo e facci sapere.

    Ti lascio ancora due consigli: Quando devi scrivere tanto codice personalizzato, usa il plugin Simple CSS, che permette di leggere meglio il codice che scrivi e riduce la possibilità di errore.

    Quando scrivi l’ultima istruzione del selettore metti sempre il ; finale (anche se si può omettere) perché nel caso aggiungessi altre proprietà potresti dimenticare di chiudere l’istruzione precedente.

    • Questa risposta è stata modificata 3 mesi, 3 settimane fa da Gloria Liuni.
    • Questa risposta è stata modificata 3 mesi, 3 settimane fa da Cristiano Zanca.
    Chi ha creato la discussione silvia74

    (@silvia74)

    Grazie mille per i consigli; sto cercando di imparare e prendo spunto dai millemila video a riguardo… ho corretto ma non cambia niente le voci del sub menu sono sempre lontanissime. ho aggiunto anche il codice per modificare l’aspetto dei moduli di contatto ma niente.

    .top-bar-content {
    	display: grid;
    	grid-template-columns: 1fr 3fr 1fr;
    	grid-gap: -15px;
    	margin-bottom: -20px;
    	background-color: #EDFCEB;
    }
    
    #top-bar-wrap {
    	padding-bottom: 5px;
    	border-bottom: 1px solid #333
      !important; 
    	margin: 0 0 0 0px;
    }
    
    .img {
    	width: 30%;
    	margin-top:2px;
    	margin-left:5px; 
    	margin-bottom: 15px;
    }
    
    .icons {
    	display: grid;
    	grid-template-columns: 3fr 2fr 2fr;
    	grid-gap: -15px;
    	justify-self: right;
    }
    
    .icon-adress,
    .icon-hours,
    .icon-iphone {
    	display: flex;
    }
    
    .adress p,
    .hours p,
    .phone p {
    	margin: 0;
    	font-family: 'Montserrat', sans-serif;
    	font-size: 10px;
    }
    
    .icon-adress i,
    .icon-hours i,
    .icon-iphone i {
    	font-size: 30px;
    	color: #009442;
    	margin: 5px 15px 0 0;
    }
    
    .adress span,
    .hours span,
    .phone span {
    	font-family: 'Montserrat', sans-serif;
    	font-size: 12px;
    	color: #009442;
    	font-weight: 600;
    }
    
    /* Styling Social Icons */
    .social-icons ul{
    	list-style: none;
    	display:flex;
    	justify-content: end;
    	font-size: 20px;
    	margin: 0 0 0 10px;
    }
    
    .social-icons ul li i {
    	color: #050c23;
    }
    .social-icons ul li i:hover {
    	color: #e3872d;
    	transition: .3s;
    }
    .social-icons ul li:nth-child(-n+4) {
    	margin-right: 20px;
    }
    
    /* Query */
    @media screen and (max-width:1024px)   {
    	.icon-adress i,
    	.icon-hours i,
    	.icon-iphone i {
    		font-size: 35px;
    		margin: 10px;
    }
      .adress span,
    	.phone span,
    	.hours span {
    		font-size: 12px;
    		margin: 0 0 0 0px;
    }
    	.social-icons ul {
    		font-size: 16px;
    		margin: 50 0 0 0px !important;
    }
    
    @media screen and (max-width:768px){       .social-icons {
    		display: none;
    	}
    	
      .top-bar-content {
    	display: flex;
    	flex-direction: column;
    	}
    	
    	.icons  {
    	 justify-self: end;
    	 }
    }
    	
    @media screen and (max-width:500px){       .top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    	
      .top-bar-content i {
    	display: none;
    	 }
    }	
    @media screen and (max-width:320px){       .top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    	
    	.img {
    	width: 10%;
    	margin-top:1px;
    	margin-left:25px; 
    	margin-bottom: 15px;
    }
    
    .sf-menu ul.sub-menu {
        top: 60% !important;
    }
    
    .wpcf7 {
      background-color: #fff;
    font: 16px 'Montserrat', sans-serif;
    }

    Ciao @silvia74,
    questa volta sono io che ho dimenticato di chiudere una parentesi.
    Sostituisci questa media query

    @media screen and (max-width:320px){
    	.top-bar-content {
    	   display: flex;
    	   flex-direction: column;
    	 }
    
    	.img {
    	width: 10%;
    	margin-top:1px;
    	margin-left:25px;
    	margin-bottom: 15px;
    	} */ prima parentesi */
    }*/ seconda parentesi */

    In modo che si chiudano 2 parentesi graffa prima del selettore .sf-menu ul.sub-menu, altrimenti le regole valgono solo sui dispositivi mobili e quindi non vedi modifiche sul desktop.
    Facci sapere

    Chi ha creato la discussione silvia74

    (@silvia74)

    Niente…. nessuna modifica…. è come se non leggesse gli stili nè delle voci del sub menu nè dei form contatti..
    Continuo a pensare che il problema sia collegato all’header perchè le voci del sub menu si aprono in corrispondenza della linea di separazione…

    Chi ha creato la discussione silvia74

    (@silvia74)

    *** Aggiornamento ***
    Ho risolto.. Praticamente riguardando il codice ho visto che c’erano altri stili non chiusi. Ho corretto quelli, inoltre qualche chiusura l’ho spostata di colonna, ho aggiornato tutto ed è andata… Nel codice sub-menu ho modificato top con margin-top e modificato il valore da % a px ed ho inserito il margin-left

    Grazie mille per il supporto, credo che trascorrerò la mia estate a studiare CSS 🙂

    • Questa risposta è stata modificata 3 mesi, 3 settimane fa da silvia74.

    Ciao @silvia74,
    sono contenta tu abbia risolto.
    Buono studio per questa estate. Fai bene, la formazione arricchisce sempre.
    Un grande saluto.

Stai visualizzando 10 risposte - dal 1 al 10 (di 10 totali)
  • Devi essere collegato per rispondere a questo topic.