Personalizzare stile menu a tendina

(@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 2 anni, 9 mesi fa da silvia74.

Moderatore

(@glorialchemica)

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

.sf-menu ul.sub-menu {
    top: 60% !important;
}

Chi ha creato la discussione

(@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;
}

Moderatore

(@glorialchemica)

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 2 anni, 9 mesi fa da Gloria Liuni.
Questa risposta è stata modificata 2 anni, 9 mesi fa da Cristiano Zanca.

Chi ha creato la discussione

(@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;
}

Moderatore

(@glorialchemica)

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)

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)

*** 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 2 anni, 9 mesi fa da silvia74.

Moderatore

(@glorialchemica)