5
O problema é que voce tem que passar um valor entre 0.0 e 1.0. Se voce passar qualquer valor acima disso ele interpreta como 1.
let corBarra = UIColor(red: 24/255, green: 27/255, blue: 113/255, alpha: 1)
UINavigationBar.appearance().barTintColor = corBarra
Se voce quiser voce tambem pode criar o seu próprio initializer:
extension UIColor {
convenience ...
4
Como vc falou que estava usando Bootstrap 3 fiz esse modelo com base no Navbar original do framework.
Resumidamente são alguns pseudo-elementos com positions e transforme. Recomendo que vc estudo os detalhes no código CSS para entender o que foi feito.
O elemento branco é um quadrado construído em um pseudo-elemento na própria nabvar, ele foi rotacionado ...
respondida 12/02/19 às 21:08
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
3
Você pode fazer o seguinte:
.navbar.custom {
width: 50%;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default custom">
...
respondida 6/01/17 às 10:52
JuniorNunes
4.83611 medalhas de ouro99 medalhas de prata2525 medalhas de bronze
3
Você pode usar o background: linear-gradient
Você pode fazer assim para gerar diferentes no background:
background-color:#4fd8e8;
background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.4), rgba(255,255,255,0), rgba(255,255,255,.4));
Referência:http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/
Para criar ...
respondida 6/12/16 às 15:35
Leo Letto
3.19322 medalhas de ouro99 medalhas de prata3232 medalhas de bronze
3
Fiquei um pouco na dúvida quanto à sua pergunta, porém usando o Bootstrap você pode fazer o que deseja (interpretei de duas formas possíveis), veja os exemplos a seguir e diga se algum deles ajuda:
Barra de navegação estática no topo
Barra de navegação fixada
3
Primeiro passo
Saber qual a posição da parte de baixo do seu elemento em relação ao topo da página:
//retorna o offset da parte de cima do elemento em relação ao topo
$('#district').offset().top;
//retorna a altura do seu elemento
$('#district').height();
Logo, para conseguirmos a posição da parte de quando acaba seu elemento em relação ao topo da página ...
3
Isso daqui está muito errado (não me entenda mal):
<form class="navbar-form navbar-right" role="search">
@*@using (Html.BeginForm())
{
@Html.AntiForgeryToken()*@
<div class="form-group">
<input type="text" id="email" class="form-control" name="email" placeholder="E-mail" required="required" autocomplete="on"...
respondida 7/10/16 às 19:05
Randrade
21,5mil22 medalhas de ouro4545 medalhas de prata118118 medalhas de bronze
2
Há várias formas possíveis de fazer isto, umas mais performáticas que outras.
Seu navbar tem alguma altura fixa? E os botões?
Caso tenham, você poderia adicionar um margin-top com a metade da subtração entra a altura do navbar e a altura do botão.
Você poderia também, em vez de ter os elementos jogados em seu navbar, coloca-los todos em um container a dar ...
2
Recriando a mesmo situação:
$(document).on('click','.navbar-nav li a',function(){
var tab = $(this).data('tab');
$('.'+tab).trigger('click');
console.log(tab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min....
2
Vc pode referencia unicamente o Button que está dentro da navbar e colocar um transform: translateY com isso independente da altura da navbar o Button sempre vai ficar centralizado na vertical
Dessa forma:
.nav-item button {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Veja aqui o exemplo funcionando:
.nav-item button {
...
respondida 26/02/18 às 17:28
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
2
Cara o seu problema é a margin default do elemento <h1>
Para corrigir coloque isso no seu CSS
.tit {
margin: 0;
}
E isso na tag no html
<h1 class="tit"> ... <h1>
Agora vai colar no topo da janela do browser pode testar ai!
respondida 4/05/18 às 15:49
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
2
Tenta utilizar este código, caso esteja com a biblioteca jQuery, caso não esteja, é só colar este código no <head>:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
...
2
Seu problema é que vc colocou uma referencia de data-target="#navbarNav" diferente do ID que usou na <div class="collapse navbar-collapse" id="navbarSupportedContent">
Repare que ao colocar o mesmo valor navbarNav no ID da div id="navbarNav" a seu Nav passa a funcionar.
Segue o modelo. Não mudei nada, só arrumei o target com o ID certo.
&...
respondida 25/09/18 às 15:37
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
2
Testei, os problemas e suas correcoes:
var $subMenu = this.nextElementSibling(".dropdown-menu");
por
var $subMenu = this.nextElementSibling;
this.parentNode('li.nav-item.dropdown.show').addEventListener
por
this.parentNode.addEventListener
e adicione para evitar que o menu feche na hora errada
e.stopPropagation();
e.preventDefault();
var ...
1
Você está utilizando algum framework para fazê-lo?
Creio que você está esquecendo de adicionar algumas dessas linhas no <head> das outras páginas:
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min....
1
João o problema é que vc está usando alguns valores em porcentagem(%) na classe da logo. Então conforme a altura da tela a logo vai mudar de posição. Para corrigir isso vc precisa usar a margem dela em pixel e tirar o top:50%
Veja como ficou depois que arrumei isso. Deixei os comentários no CSS
html, body {
width: 100%;
height: 100%;
...
respondida 2/05/18 às 11:30
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Vc pode alinhas apenas com o text-aling:right.
Veja como ficou no modelo (deixei o comentário de onde fiz alinhamento no código do CSS) Aproveitei e já inclui a logo caso queira usar dessa forma a esquerda e menu a direita
OBS: Como vc ainda não fez o tratamento responsivo ele vai abrir meio esquisito no Snippet aqui to StackOveflow, mas se vc exibir em "...
respondida 30/04/18 às 11:13
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
John seguindo todas as regras que vc falou eu consegui chegar nesse resultado.
O exemplo usa FlexBox então é bem responsivo. vc pode acrescentar quantos itens quiser que vai ajustar direitinho (Talvez vc tenha que diminuir a fonte um pouco se tiver itens de mais...) Mas no mais funciona bem em telas menores até certo ponto.
html, body {
width: 100%...
respondida 16/03/18 às 19:56
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Opção 1
Igor eu consegui resolver o "Bug" mudando o tipo do display e colocando uma altura auto na .navbar quando o Menu está responsivo.
Primeiro como vc está construindo o sei estilo dentro do @media only screen and (max-width: 768px) vc deveria usar esse estilo na .navbar navbar-expand-md e não o que vc colocou de navbar-expand-sm a não ser que vc ...
respondida 20/03/18 às 19:33
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Jovem de acordo com a sua pergunta e os comentários que li por aqui acredito que é isso que vc quer. O menu ocupando a largura total e a barra de pequisa a direita.
Seu CSS tinha muita coisa que não precisava então simplifiquei um pouco retirando algumas coisas. Mesmo assim não está perfeito, mas acho que é um caminho pra vc seguir com seu projeto. (por ...
respondida 7/03/18 às 0:30
hugocsl
64,4mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Segue o script que usei em umas das minhas páginas
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar').css("background-url", "dist/img/logo1.png")
} else {
$('.navbar').css("background-url", "dist/img/logo2.png")
}
});
</script>
respondida 25/02/18 às 22:57
Mike Otharan
85311 medalhas de ouro77 medalhas de prata2626 medalhas de bronze
1
No CSS, deverá acrescentar o atributo color na classe .main.menu.fixed, por exemplo:
.main.menu.fixed {
background-color: #FFFFFF;
color: #333333;
border: 1px solid #DDD;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
Numa solução utilizando jQuery poderia também verificar a ocorrência do Scroll e remover a class inverted do Menu, e adicioná-la ...
1
No teu HTML coloque o teu navbar dentro de uma classe chamada .header por exemplo. Dentro desta classe trabalhe o tamanho dela nas suas determinadas media queries. O seu logo vc tb pode colocar ele com a classe img-responsive e trabalhar o tamanho dele em cada media queries tb.
ex:
normal(desktop)
.header {
height: 200px
}
Media celular:
.header {height: ...
1
Eu fiz três pequenas alterações no seu codepen, e me pareceu funcionar como você quer:
1- A height a Navbar é criada na classe ".navbar" e não na ".nagivation".
.navbar {
height: 100px;
min-width: 100%;
background-color: rgba(0, 255, 0, 0.5);
display: table;
table-layout: fixed;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}...
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
nav-bar × 60css × 26
html × 20
twitter-bootstrap × 14
menu × 10
bootstrap-4 × 8
javascript × 7
jquery × 7
html5 × 7
css3 × 6
bootstrap × 6
bootstrap-3 × 5
php × 4
layout-responsivo × 4
rolamento × 3
dropdown × 3
header × 3
c# × 2
laravel × 2
carousel × 2
align × 2
asp.net-mvc × 1
.net × 1
asp.net × 1
react × 1