Logo Hardware.com.br
jcvlanova
jcvlanova Novo Membro Registrado
11 Mensagens 0 Curtidas

navbar background

#1 Por jcvlanova 05/05/2020 - 12:18
Galera, estou aqui de novo. Bem, estou querendo colocar a minha logomarca como imagem de fundo do meu navbar. Porem, tenho nele um menu hamburguer que ao ser clicado expande para a direita e mostra os itens de menu. Não consegui colocar a logo como background do navbar, dai tentei colocar como um item tipo imagem normal, só que essa solução acabou atrapalhando toda a disposição dos demais elementos do navbar. As vezes a imagem empurra o menu para baixo e os itens acabam aparecendo fora da barra e as vezes quando o menu se expande acaba sobrepondo a imagem. Daí acredito que a melhor solução seja mesmo colocar a imagem como background do Navbar. Ocorre que ja tentei de todas as formas mas a imagem nao aparece.
Alguem pode me ajudar ?

Aí vai o código:

[code=html]


































Menu

The New York Times

Today's Paper







Your Monday Briefing


Listen:"Modern Love"

In the 'In Her Word's Newsletter

Bolsa

Clima









[/code]
...


no css fiz o seguinte:

[code=c].navbar {
background: url('/oguardiaologo.png') no-repeat center center fixed;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
border: none;
}[/code]
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#3 Por esquiloesper...
05/05/2020 - 22:01
Olá @jcvlanova

Aplicar a imagem como "background" é a melhor saída, porque assim ela não irá "empurrar' outros elementos do conteúdo.
Mas a opção "cover" ou "contain" não ajudam muito nestes casos porque ambas desconsideram perder pedaços importantes dalgum lado da sua imagem.

Correto seria fixar o tamanho da imagem em um sentido (largura ou altura) de maneira a atender melhor o objetivo do seu projeto.
Por exemplo, quando a imagem tiver de cobrir toda a extensão do topo e a altura estivesse fixa em "80px" então o "size" seria:
[code=css]background-size: 100% 80px;[/code]
- Confira um bom exemplo desta regra no link a seguir, observe que é responsivo expandindo e contraindo a imagem de acordo com a largura da tela:



O problema no seu código é que o não tem altura definida, ele é dependente da altura do menu
  • o que não é boa coisa pois impede de usar o recurso descrito.

    Não sabemos se o seu projeto será responsivo ou não, por isso fica difícil sugerir melhorias.
    O que posso garantir é que se a imagem não aparece para você o erro certamente está no apontamento 'url' ali na propriedade background do arquivo CSS, que não encontra a imagem especificada. Bastou apontar corretamente aqui para a imagem surgir nele. Veja só:

Anexo do post

Anexos

Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
jcvlanova
jcvlanova Novo Membro Registrado
11 Mensagens 0 Curtidas
#4 Por jcvlanova
06/05/2020 - 14:53
Bem, sou iniciante e estou tentando aprender html e bootstrap com a feitura de uma pagina especifica. No caso, o projeto é sim pra ser responsivo. Ainda estou me enrolando em algumas coisas, mas to tentando. No caso dessa imagem, mesmo sem entender muito eu de cara vi que o ideal é colocar como background, ajustando-a no centro do meu navbar. Mas ja tentei de todas as formas e não consegui.

obs: "O problema no seu código é que o não tem altura definida, ele é dependente da altura do menu
  • o que não é boa coisa pois impede de usar o recurso descrito."

    preciso aprender como corrigir isso

    No link que voce me enviou percebi que o navbar fica acima de um header que contem a logo da universidade, os links do twitter, facebook e instagram e o campo de busca. Pois é, mas e para fazer ? kkkkk ai complica

    Para o projeto da pagina que eu imaginei, preciso manter esse menu do tipo hamburguer que expandirá com o clique.
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#5 Por esquiloesper...
06/05/2020 - 16:41
jcvlanova disse:
... mesmo sem entender muito eu de cara vi que o ideal é colocar como background, ajustando-a no centro do meu navbar.

Fixar no centro é uma decisão trabalhosa que exige estudo de projeto. Somente imagens muito pequenas ou com foco específico ficam no centro.

preciso aprender como corrigir isso

Ué, basta definir uma altura através de CSS (height)

No link que voce me enviou percebi que o navbar fica acima de um header que contem a logo da universidade, os links do twitter, facebook e instagram e o campo de busca. Pois é, mas e para fazer ? kkkkk ai complica

Faça exatamente do jeito que você fez. Eu mostrei que se código já funciona. Só precisa apontar direito para a imagem que você quer apresentar ali.
⮩Aquele link era pra você ver, testar e aprender que eles optaram por usar uma imagem simples, porém capaz de se ajustar à largura da tela sem prejuízo do leiaute.

Para o projeto da pagina que eu imaginei, preciso manter esse menu do tipo hamburguer que expandirá com o clique.

Ok, mas isso nada tem a ver com a imagem de fundo.
Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal