← HTML + CSS

Fixar DIV no topo mas não na horizontal

Lida 7393 vezes

Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Estou com um problema e ainda não encontrei resposta na web...

Quero fixar a div do menu no topo do site, mas não quer fixá-la horizontalmente... Ou seja, em janelas mais pequenas quero que continue a dar para se ver a parte direita do menu...

Experimentem abrir http://wrestling.pt numa janela pequena e vejam o que acontece ao menu com o scroll horizontal... O mesmo se aplica em Mobile...

Alguém tem solução? Vejo que no Facebook isso não acontece... E aqui no +T também não (tanto).
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Ninguém sabe?
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Podes criar uma função em javascript, caso a janela seja menor que um certo height, isso não fica fixo.
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Podes criar uma função em javascript, caso a janela seja menor que um certo height, isso não fica fixo.

A questão não é o height, é o width.

Em desktop está tudo bem, mas quando vejo o site em mobile e faço zoom o menu fica fixo no topo à esquerda (certo) mas fica com a largura na mesma de 950 e não consigo ver o lado direito do menu...
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Ahh! lol

Mas vai dar ao mesmo o que disse. lol
Offline

fhanity 
Membro
Mensagens 191 Gostos 5
Feedback +1

Troféus totais: 18
Trófeus: (Ver todos)
Apple User Apple User Super Combination Combination Topic Starter Level 3 Level 2 Level 1 100 Posts 50 Posts

A questão não é o height, é o width.

Em desktop está tudo bem, mas quando vejo o site em mobile e faço zoom o menu fica fixo no topo à esquerda (certo) mas fica com a largura na mesma de 950 e não consigo ver o lado direito do menu...

já tentaste meter a width em max ou auto?
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Não... o que tenho é uma div com width 100% e depois outra dentro com 940px centrada com margin 0 auto.

Nunca usei width max ou auto...
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Estive a testar com o Facebook, e eles têm assim:

- Se a janela é superior a X (por exemplo em desktop) então o menu tem position:fixed e acompanha o scroll...

- Se a janela é inferior a X (por exemplo reduzindo o tamanho da janela ou através de mobile) então o menu deixa de ter a position:fixed e fica lá "parada" no topo normalmente, não acompanhando o scroll...

Conseguem-me ajudar a fazer igual?
Offline

Diogo Pinto 
Administrador
Mensagens 4388 Gostos 363
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Dá um check aqui Luís:

http://css-tricks.com/css-media-queries/ :)

Espero que ajude!
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Parece que vou ter que fazer aqui um "mini-responsive" lol
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Obrigado Diogo! Consegui fazer o que queria, mas ainda estou a testar a melhor forma pra ficar à maneira :P