Centrare logo in meniu


(Vladimir) #1

Salutare,

Am un meniu la care ma chinui de ceva vreme si nu-i dau de cap.
Nu reusesc sub nicio forma sa centrez logoul(navbar-brand). Cu margine mi-l pozitioneaza in centrul spatiului ramas iar cu pozitionare absoluta il centrez, dar il pune evident peste celelalte elemente care sunt ancore, iar daca ii pun index negativ iar nu este bine pentru ca si logoul este tot ancora.

Multumesc.


(Eduard-Dan Stanescu) #2

Position absolute, altfel nu ai cum decat cu flex.


(Kilo Grammer) #3

flexbox rules.


(Vladimir) #4

Multumesc, dar nu este centrat in pagina ci intre spatiul ramas :smiley:

@zshare Si pentru ancora ar fi vreo solutie?


(Kilo Grammer) #5

de ce nu pui un ancora centrata intr-un div, iar div-ul e pozitionat absolut?


(Vladimir) #6

Imi acopera celelalte linkuri.


(Eduard-Dan Stanescu) #7

@vlrstea, aici tine doar de design, faci breakpoint-ul de la hamburger mai devreme si rezolvi, daca nu, reduci font-size, exista multe metode sa inghesui.

@kilogrammer, nu-i bine ce ai facut acolo, nu te angajez. :joy:


(Vladimir) #8

Stiu ca este vineri seara, dar ai putea te rog frumos sa-mi arati un exemplu? Nu inteleg ce vrei sa spui nici cu breakpointul nici cu font-size.


(Kilo Grammer) #9

Nu inteleg care e problema. Daca se suprapune, atunci ai o problema de logica in ce vrei sa faci.
Cand latimea ecranului e mica, e normal si posibil sa se suprapuna daca vrei ca logo-ul sa fie centrat, caci e posibil ca butonul urmator din dreapta sa ajunga in mijloc, logo-ul fiind destul de lat.

Nu-i nimic, caci nu-mi caut job :laughing: Dar ce greseala vezi tu?


(Eduard-Dan Stanescu) #10

Nu este la jumatatea paginii. Daca duci o linie imaginara din marginea dreapta in centrul logo-ului si o masori, nu o sa fie egala cu lungimea dusa din marginea stanga in centrul logo-ului. Tu trebuie sa faci ca cele 2 parti stanga/dreapta sa aiba acelasi width.


(Kilo Grammer) #11

Da, stiu ca nu e ce vrea Vladimir, desi n-am inteles exact ce vrea. Eu cred ca el vrea de fapt e ca atunci cand latimea ecranului e mare, logo-ul sa fie la mijloc, iar cand latimea e mica, logoul sa fie cum am facut eu mai sus, adica sa fie centrat in spatiul dintre butoane, asta ca sa nu stea peste ele. Asta ar merge facut simplu cu media query


#12

Salut, inca invat CSS am zis ca poate ajut :smiley: , e ok abordarea asta ?
https://output.jsbin.com/duraguheju


(Eduard-Dan Stanescu) #13

Intre anumite rezolutii schimbi font-size-ul ca sa nu se suprapuna logo-ul.
Poti schimba breakpoint-ul hamburger-ului, practic tu poti seta la ce rezolutie vrei sa vezi meniul ca pe mobile, asta ca sa nu inghesui link-urile de la butoane si ca sa nici nu se suprapuna logo-ul peste ele.

Explicatie mai buna nu pot sa-ti dau decat daca iti fac eu…


(Vladimir) #14

Acum am înțeles ce vrei sa spui, nu este nevoie sa faci.

Cred ca jsbin arata o versiune mai veche din ce am mai modificat eu acolo și nu se înțelege care este problema și ce vreau sa fac. Nu mai sunt acasă, dar o sa revin cu mai multe lămuriri si o sa pun codul în alta parte.


(Vladimir) #15

https://jsfiddle.net/spedmy5u/
Aici este fara pozitionare absoluta a logoului. Logoul este pozitionat cu margin left si right in mijlocul spatiului dintre celelalte elemente.

Logoul trebuie sa stea doar pe mijloc, centrat, atat pe mobile cat si pe desktop. Breakpointurile sunt OK, nu se suprapune nimic.
Cand am zis ca se suprapune ma refeream ca se va suprapune elementul care tine logoul daca il centrez cu position absolute. Position absolute scoate elementul din flow si il pune un strat mai aproape, facand imposibil sa mai accesezi orice ar fi in spatele lui, in cazul meu celelalte linkuri. Daca pun index negativ pe logo(pe elementul pozitionat absolut) se va putea face click pe restul dar nu se va mai putea face click pe logo.

https://jsfiddle.net/spedmy5u/3/
Aici este un update cu logoul pozitionat absolut si index negativ.

.abs
    {
        position: absolute;
        width: 100%;
        top: 5px;
        left: 0;
        text-align: center;
        margin:0 auto;
        z-index: -1;
    }

Imi cer scuze pe indentari dar am modificat si zapacit codul de ma doare capul, nu am mai tinut cont.

@mp3 Din pacate nu este ceea ce trebuie, multumesc oricum.