Utilizo Navbar ou outra coisa?

[mruoppolo 14]

Olá, tudo bem?

 

Estou com um pequeno problema pra montar um header aqui, este header ele tem no caso, 3 navbars, como segue a imagem abaixo:

 

 

No caso a primeira pelo que eu entendi seria essa com o email de um lado e o botão de login do outro, depois seria o logo com o menu ao lado e por ultimo o menu da área de usuários.

 

Como eu monto isso, posso usar 3 vezes a navbar do bootstrap, ou eu devo fazer de outra forma, como eu coloco o símbolo de e-mail do lado do texto alinhado de maneira correta?

 

Obrigado :D

[L. Henrique 179]

Marcello,

Sim, você pode ter múltiplas nav's uma abaixo da outra. Seria aconselhável adicionar uma div pai para não se perder quando for editar o conteúdo.

Veja um exemplo:

<div class="menu-wrapper">
   <nav class="navbar navbar-default" role="navigation">
      ...
   </nav>
   <nav class="navbar navbar-default" role="navigation">
      ...
   </nav>
   <nav class="navbar navbar-default" role="navigation">
      ...
   </nav>
</div>

Colocar o texto de alinhado de maneira correta? Fica difícil dizer, pois parece tudo ok.

O certo ao adicionar um ícone ao lado de algum texto é utilizando o span com a classe desse ícone dentro (ou até mesmo um img). Veja um exemplo:

<p class="email"><span class="fa fa-envelope-o"></span> meuemail@gmail.com</p>

Abraços!

[mruoppolo 14]

Cara, deixa eu te falar, eu não te mandei o e-mail de novo, por causa que eu ainda não consegui finalizar esse projeto aqui, então eu to enroladão o cliente me falo que eu tenho só até hoje as 21 pra finalizar, como o backend esta todo pronto, estou só linkando com o front end ai amanhã já te mando aquele e-mail com tudo certinho.

 

Valeu por salvar a vida ai de novo.

 

Abraço

[Carlos Henrique A. 7]

@mruoppolo

No caso do icone, existe um site chama Font Awesome,

Gosto muito dele, você pode instalar através do CDN,

 

Depois de instalar ele no seu head através do <link....

Você procura o icone que quer no site e inseri da seguinte forma:

<p class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> meuemail@gmail.com</p>

No caso dessa class, eu adicionei o icone do email pesquisado nesse site,

Vale muito apena você dar uma estudada nele depois, vai te adiantar bastante..

 

Abraços

[mruoppolo 14]

Olá Carlos, muito obrigado pela dica, no caso o designer não utilizou o font-awesome e por causa disso se eu colocar o cliente reclama, esse cliente ele é muito exigente, ele inclusive me pediu para fazer a janela modal de login do site aparecer 3px mais para baixo, rsrsrs, ou seja, precisa ficar idêntico, por isso eu precisei fazer com uma imagem.

 

valeu :D

[Carlos Henrique A. 7]

Rs, entendi..

Então boa sorte ai!

 

Olá Carlos, muito obrigado pela dica, no caso o designer não utilizou o font-awesome e por causa disso se eu colocar o cliente reclama, esse cliente ele é muito exigente, ele inclusive me pediu para fazer a janela modal de login do site aparecer 3px mais para baixo, rsrsrs, ou seja, precisa ficar idêntico, por isso eu precisei fazer com uma imagem.

 

valeu :D

 

Entendi rs, então boa sorte ai..

Abcs