Solucionado
Bom dia, pessoal. Tudo certo?
Bom, quando importo o bootstrap os padrões de fonte dele não são dos mais compatíveis com windows. Tentei sobrescrever no código com uma fonte do google:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">Mas aparentemente estou fazendo algo errado. Poderiam me dar um help?
Outra dúvida, no projeto da TopCasaFina não seria legal colapsar o menu quando é clicado nele? Como posso fazer isso?
Grande abraço.
Bom dia, Alexandre! Tudo bem, cara? =)
Simplesmente colocar o <link>, infelizmente não é o suficiente, você precisa dizer no seu CSS que quer utilizá-lo, com a propriedade font-size!
Sobre o menu, se não me engano os exercícios irão lhe guiar para mostrar com fazer o collapse, não? Você chegou a fazê-los?
Abraço e bons estudos,
Fábio
Salve, Fábio!
Então, importei a fonte com as instruções do google fonts no css também e adivinha? Não mudou... =(
E nos exercícios ele não ensina não, Fábio... eu tentei ir pela lógica mas irei começar o curso de javascript agora... mas não queria deixar o projeto pensando que poderia ter feito isso.... rs
Alexandre,
Faz o seguinte... Posta aqui seu código. =)
Dessa forma eu consigo lhe ajudar mais. Sem código tudo o que eu disser não vai passar de um chute. Rs...
Fábio
Vamos lá...
Sobre a fonte:
Meu head:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/ajustes.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>Meu css:
html {
font-family: 'Roboto', sans-serif;
}Sobre o menu nav.
O html:
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TopCasaFina Arquitetura</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#sobre-nos">Sobre Nós</a></li>
<li><a href="#nossos-projetos">Nossos Projetos</a></li>
<li><a href="#depoimentos-clientes">Depoimentos</a></li>
<li><a href="#video-institucional">Vídeo Institucional</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
<div id="banner-topo">
<h1>TopCasaFina Arquitetura</h1>
<p>Projetando a casa dos sonhos desde 2000 A.C.</p>
<a href="#contato" class="btn btn-primary btn-lg">Contate-nos agora</a>
</div>
</header>O js:
$('#navbar-collapse').on('show.bs.collapse', function() {
$('#banner-topo').css('transform', 'translate(-50%,0)');
});
$('#navbar-collapse').on('hide.bs.collapse', function() {
$('#banner-topo').css('transform', 'translate(-50%,-50%)');
});Acho que é isso, né? rs
Alexandre,
Parece que está tudo certo, mesmo. O que eu acredito que esteja acontecendo é que o Bootstrap está sobreescrevendo suas regras. Como você aplicou a propriedade font-family ao html, os seletores que o framework possuem especificidade maior em, portanto, passam por cima desse. Felizmente existem algumas formas de contornar essa situação, mas muitas delas eu acho deselegante. Rs.
A primeira forma, talvez mais simples é usar a flag !important, assim:
html {
font-family: 'Roboto', sans-serif !important;
}Fazendo isso, você está forçando essa regra prevalecer. Um contra de se fazer isso é que muita gente é contra o uso de !important...
Uma outra possibilidade é você criar uma classe e adicioná-la aos elementos que você quer que tenham essa fonte, se forem todos, você pode adicionar no <html>, algo assim:
.fonte-roboto {
font-family: 'Roboto', sans-serif;
}<html class='fonte-roboto'>
<...>Essa segunda solução me parece um pouco gambiarra... Rs.
Duas outras formas é alterar o próprio arquivo bootstrap.css. Se você olhar bem para ele vai ver o seguinte código:
html {
font-family: sans-serif;
}Alterando essa linha, suponho que as coisas devam funcionar. Se você optar por alterar o framework, você possui uma "alternativa b", ainda, ou seja, na hora de fazer o download do Bootstrap, você pode customizá-lo. Se tiver interesse nessa última opção, dá uma olhada na seção customize do site. =)
Espero ter ajudado, mas qualquer dúvida ou se ainda não tiver resolvido seu problema, dá um toque aqui que continuo a ajudá-lo até solucionarmos. =)
Abraço e bons estudos,
Fábio
Ah, Fábio... achei onde estava o problema... durante várias partes do código, o bootstrap reescreve a fonte por mais vezes que eu chame ela, ou seja, ou eu chamo em toda tag (que é uma baita de uma gambiarra também), ou faço a customização e tcharãa.... tudo funcionando (rs).
Valeu mesmo pela ajuda.
E sobre o collapse, tu conseguiu entender?
Alexandre,
Verdade, desculpa, acabei esquecendo que você não estava conseguindo a parte do collapse, também.
Pergunta boba... Você importou o script do navbar-animation-fix.js?
Fábio
Importei sim, Fábio.
Ele funciona como funciona no exercício. O que eu queria era um adendo, entende? Quando clicar em um item do menu, ele vai para "id" na página e fecha o menu novamente. Eu sei que eu preciso alterar a tag "aria-expanded" pela javasript, mas não consegui aplicar... =(
Alexandre,
Eu fiz um teste aqui:
$('#navbar-collapse').on('click', function () {
$('.navbar-toggle').click();
})Se você adicionar isso ao seu script ele deve funcionar. Não sei se é a melhor forma de se fazer isso... É bem possível que tenha melhores...
Basicamente o que eu fiz, foi dizer que quando o elemento for selecionado, eu vou disparar um evento de click no botão - .navbar-toggle. Fazendo isso, o menu é colapsado ao selecionar uma opção. =)
Espero ter ajudado! Mas qualquer dúvida não deixe de postar por aqui para podermos ajudá-lo! =)
Abraço e bons estudos,
Fábio
Poutz... ficou perfeito, Fábio...
Eu tava indo pelo mesmo caminho, mas eu não havia me ligado que quando se chama um "toggle" ele muda seu status... eu tava indo lá lógica de alterar a tag "aria-expanded" para false, que é o padrão de como começa o objeto.
Mas perfeito, man... muito obrigado pelo apoio.
Abração!
E o burro aqui marcou a própria resposta como solução... agora não consigo marcar corretamente... =(
Desculpa, Fabião.