Un utente ha chiesto informazioni su GeneratePress di Wordpress

Il menu a discesa del menu mobile si sovrappone al contenuto del sito web

Un utente ha chiesto 👇

Ciao! I CSS sono nuovi per me, quindi perdona la mia terminologia se ho problemi a riportare le cose in modo accurato!

Ok, quindi ho provato a personalizzare il menu di navigazione principale utilizzando il seguente codice:

/ * Menu di navigazione principale * /
.main-navigation {
colore di sfondo: bianco;
bordo: 1px nero;
stile del bordo: testa solida;
altezza: 40px;
/ * larghezza: 1020 px; * /
}

/ * Testo del menu di navigazione principale * /
.main-navigation .main-nav ul li, .main-navigation .menu-toggle {
colore nero;
spaziatura lettere: 0.15em;
trasformazione del testo: superiore;
dimensione del carattere: 0,8em;
altezza della linea: 40px;
}

/ * Menu di navigazione principale Aspetto del testo quando vai ai link * /
.main-navigation .main-nav ul li: hover> a,
.main-navigation .main-nav ul li: focus> a,
.main-navigation .main-nav ul li.sfHover> a {
colore nero;
colore di sfondo: bianco;
decorazione del testo: rivestimento;
}

Le cose sembrano fantastiche sul sito desktop, ma nella versione mobile, le opzioni del menu di navigazione (nel menu a discesa) si sovrappongono al contenuto del blog. Inoltre, quando si fa clic su “Menu”, il testo scompare, ovvero penso che il colore del collegamento “Menu” visitato sia bianco. Non sei sicuro di come spingere verso il basso il testo del blog in modo che il menu a discesa non si sovrapponga e cambiare il colore del link “Menu” visitato in nero?

Inoltre, fintanto che ho la tua attenzione (ah!), Mi piacerebbe fissare la larghezza del menu di navigazione principale alla larghezza del contenuto del sito Web, quindi i limiti superiore e inferiore del menu dovrebbero essere rimossi Naviga il bordo sinistro del blog e il bordo destro del pulsante “Cerca”. Ho provato a impostare una scarpa in un’impostazione goffa impostando la larghezza del menu di navigazione principale su 1020px (è nel mio codice, ma attualmente lo sto commentando), ma questo vince quando abbassi lo schermo, e soprattutto vinci nel versione mobile. C’è un modo per svuotare la barra dei menu con il bordo sinistro corrente del contenitore del blog e il bordo destro della barra laterale destra, ma mantenere l’aspetto mobile reattivo quando lo schermo è ridotto?

Mi dispiace che sia stato così banale. Grazie in anticipo per qualsiasi aiuto che puoi fornire !!

Autore del tema

(@ edge22)

2 anni, 9 mesi fa

Ciao,

La prima edizione è stata creata da height: 40px; CSS nel tuo .main-navigation selettore. Se raggiungi quell’altezza, dovrebbe funzionare.

Per impostare il colore del passaggio del mouse, prova questo CSS:

button.menu-toggle:hover {
    color: black;
}

Per la domanda sull’allineamento, prova:

1. Impostare il contenitore su “Solo contenitore” in Personalizza> Layout> Contenitore.

2. Aggiungi questo SEC:

.one-container .site-content {
    padding-left: 0;
    padding-right: 0;
}

Fammi sapere 🙂

Lanciatore di thread

(@ jackiesoo213)

2 anni, 9 mesi fa

Ciao Tom,

Sì, tutto ha funzionato! Grazie mille per il vostro aiuto !!

Autore del tema

(@ edge22)

2 anni, 9 mesi fa

Sei il benvenuto 🙂

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *