Utilizzare Gradiente su una barra dei menu?

Un utente ha chiesto 👇

Per favore, è possibile applicare quanto segue alla barra dei menu?

Sono felice di imparare ma ho solo bisogno di ottenere un vantaggio nella giusta direzione.

Si prega di consultare questo collegamento per informazioni sul gradiente che desidero utilizzare:

http://colorzilla.com/gradient-editor/#571845+0,900c3e+17,c70039+33,ff5733+55,ffc300+82,ffc300+100

Ecco le informazioni SEC che ha generato:

sfondo: rgb (87,24,69); / * Vecchi browser * /
sfondo: -moz-linear-gradient (top, rgba (87,24,69,1) 0%, rgba (144,12,62,1) 17%, rgba (199,0,57,1) 33%, rgba (255,87,51,1) 55%, rgba (255,195,0,1) 82%, rgba (255,195,0,1) 100%); / * FF3.6-15 * /
sfondo: -webkit-linear-gradient (top, rgba (87,24,69,1) 0%, rgba (144,12,62,1) 17%, rgba (199,0,57,1) 33%, rgba (255,87,51,1) 55%, rgba (255,195,0,1) 82%, rgba (255,195,0,1) 100%); / * Chrome10-25, Safari5.1-6 * /
sfondo: gradiente lineare (fondo, rgba (87,24,69,1) 0%, rgba (144,12,62,1) 17%, rgba (199,0,57,1) 33%, rgba (255, 87,51,1) 55%, rgba (255,195,0,1) 82%, rgba (255,195,0,1) 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * /
filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = ‘# 571845 ′, endColorstr =’ # ffc300 ′, GradientType = 0); / * IE6-9 * /

Grazie in anticipo. Tom

(@anevins)

Donatore WCLDN 2018 Supporto volontario

3 anni, 1 mese fa

Aggiungilo alla sezione “CSS aggiuntivo” del pannello:

.navigation-top {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#571845+0,900c3e+17,c70039+33,ff5733+55,ffc300+82,ffc300+100 */
    background: #571845; /* Old browsers */
    background: -moz-linear-gradient(top, #571845 0%, #900c3e 17%, #c70039 33%, #ff5733 55%, #ffc300 82%, #ffc300 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #571845 0%,#900c3e 17%,#c70039 33%,#ff5733 55%,#ffc300 82%,#ffc300 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #571845 0%,#900c3e 17%,#c70039 33%,#ff5733 55%,#ffc300 82%,#ffc300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#571845', endColorstr='#ffc300',GradientType=0 ); /* IE6-9 */
}

https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Lanciatore di thread

(@ teejay01810)

3 anni, 1 mese fa

Grazie mille, sarebbe troppo chiedere come cambiare il colore del testo in classe .navigation-top

e la stessa domanda anche per l’intestazione

(@anevins)

Donatore WCLDN 2018 Supporto volontario

3 anni, 1 mese fa

il colore del testo nella classe .navigation-top

.navigation-top .current-menu-item > a, 
.navigation-top .current_page_item > a,
.navigation-top a {
    color: pink
}

stessa domanda per l’intestazione

.site-title,
.site-title a,
.site-description {
    color: pink;
}

Lanciatore di thread

(@ teejay01810)

3 anni, 1 mese fa

grazie sooo, mi hai appena risparmiato un sacco di tempo per capire questo, hai una pagina di iscrizione?

è anche facile spiegare l’importanza della “a”?

Questa risposta è stata modificata 3 anni, un mese fa da. Lanciatore di thread

(@ teejay01810)

3 anni, 1 mese fa

Sfortunatamente, ho scoperto che il menu a discesa su un telefono ha uno sfondo di traduzione. questo significa che il colore del mio carattere preferito dei display bianchi è invisibile.

C’è un modo per definire una dimensione del carattere separata per il menu principale e il menu a discesa?

Ho provato a cambiare lo sfondo del menu a discesa in modo che corrispondesse al menu principale utilizzando .navigation-top, .navigation-top a {background: # 5195ee;
} sembra molto boxe, tuttavia, a causa degli spazi tra ogni elemento.

Saluti.

tom

(@anevins)

Donatore WCLDN 2018 Supporto volontario

3 anni, 1 mese fa

Prova ad aggiungere:

.main-navigation ul {
    background: #5195ee;
}

Lanciatore di thread

(@ teejay01810)

3 anni, 1 mese fa

grazie, questo aiuto fa parte del servizio? o sei solo gentile. Consiglierò wordpress e questo forum a chiunque !!

(@anevins)

Donatore WCLDN 2018 Supporto volontario

3 anni, 1 mese fa

Prego. Non sono coinvolto nel tema, ma WordPress è un bel CMS con utenti simpatici, quindi è una cosa carina da supportare.

Lanciatore di thread

(@ teejay01810)

3 anni fa

Ciao, potresti dirmi se il titolo del sito e la descrizione del sito possono essere centralizzati?

Stessa domanda per la barra dei menu, per qualche motivo non allineata con il testo della pagina.

Può anche aumentare la dimensione del carattere per la barra dei menu in un modo che funzioni bene su tutti i dispositivi e preoccuparsi di specificare il valore in pixel.

Grazie in anticipo

Was this helpful?

YesNo

0 / 0