Come centrare la ricerca nell'intestazione

Ciao a tutti!

.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
    width: 600px;
    left: 150px;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
    left: 150px;
}

Ho scritto questi codici, quando li aggiungo al campo css, appare come voglio, ma non appare così sugli altri.
Potete aiutarmi per favore?
https://pvpfarm.com

Ekran görüntüsü 2024-03-31 132713

Ciao amici utili.
Come posso centrare questo?
Sembra diverso quando si è effettuato l’accesso. Sembra diverso dopo aver effettuato l’accesso.
Voglio che rimanga sempre al centro e nella stessa posizione.

https://pvpfarm.com

Grazie. :pray:

1 Mi Piace

Sto solo ipotizzando, ma l’offset sembra essere dovuto alla differenza di larghezza tra i pulsanti di accesso e il pulsante del menu di ricerca e l’avatar.

2 Mi Piace

Sì Lilly, questo è esattamente il problema. Possiamo trovare una soluzione?

È lo stesso problema che avevi in questo argomento
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

2 Mi Piace

perché stai mostrando la barra di ricerca agli utenti anonimi? lascia perdere. Ci sono arrivato. Pensavo che cliccare sulla barra di ricerca avrebbe fatto apparire la finestra di accesso, ma in realtà mi permette di cercare… ci do un’occhiata veloce.

Trovo tutto molto pieno di bug su Chrome sul mio Macbook. I pulsanti dell’intestazione aprono i menu sbagliati e cercare di chiudere il cassetto della chat apre il menu hamburger, ecc.

Non ho una risposta sul perché: la mia ipotesi è che ci siano alcuni SCSS contrastanti. Tu e il tuo forum state facendo progressi :slight_smile: - non scoraggiarti; rispetto a quando hai iniziato qui, il tuo sito è molto migliorato. Il CSS è complicato se non hai esperienza e molto può diventare disordinato in fretta se non stai attento. Prenditi il tuo tempo e leggi alcuni degli argomenti della knowledge base in Documentation qui. Penso che se semplifichi e snellisci un po’ il tuo CSS, risolverai i problemi.

3 Mi Piace

Sono molto sorpreso in questo momento :hushed:, non ho nemmeno un problema del genere. Forse questo problema si sta verificando perché hai tradotto la lingua del sito? La lingua principale del sito è il turco.

Verificherò presto sul mio macbook

Mi piacerebbe molto minimizzare i codici ma era molto complicato.

Posso darti l’autorità di amministratore. Puoi testimoniare quanto è complicato. :sweat_smile:

@media screen and (min-width:640px){
 .d-header .home-logo-wrapper-outlet,
 .d-header .panel{
        width:240px;
 }
}

Questo codice ha risolto il mio problema comunque. Ma non sembra bello.

3 Mi Piace

L’intestazione e il contenuto della pagina sono centrati indipendentemente l’uno dall’altro, quindi se, ad esempio, l’intestazione ha più contenuto a sinistra o a destra, il centro dell’intestazione sarà diverso.

Ecco alcune illustrazioni di questo, qui il “centro” dell’intestazione cambia in base alla quantità di contenuto a destra:



Non esiste un modo semplice per garantire che il centro sia sempre lo stesso sia per l’intestazione che per il contenuto della pagina, soprattutto considerando che la larghezza del contenuto dell’intestazione può cambiare (a causa di traduzioni, numero di pulsanti, ecc.).

Questo funziona perché il contenuto a sinistra (logo) ha ora la stessa larghezza del contenuto a destra (contenitore pulsanti). Sarà necessario un CSS separato per selezionare .anon (disconnesso) perché vengono mostrati pulsanti diversi a destra. Anche le traduzioni, come hai notato, renderanno i pulsanti di dimensioni diverse, il che influenzerà l’allineamento.

4 Mi Piace

Grazie @awesomerobot, grazie per aver spiegato con gli screenshot. È stato molto comprensibile per me. :hugs:

@media screen and (min-width:640px){
 .d-header .panel{
  margin-left:-66px;
 }
}

Ci sto provando anche in questo modo, ma è come il gioco del serpente in Tetris. I due si inseguono sullo schermo. :sweat_smile:

Soluzione


/* arama search bar ortalama */
@media screen and (min-width:640px){
 html:not(.anon) .d-header .panel {
   margin-left: 95px;
    }
}

.floating-search-input-wrapper {
    margin-right: -35px;
}
/* arama search bar ortalama */

Puoi regolare i pixel in base alle tue esigenze.

1 Mi Piace