Ir para conteúdo
marcelocardoso

navbar após refresh da página, some background-color

Recommended Posts

Olá Colegas....

Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo...
O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT.

1) Que é o modo que ele deve começar;

2) Mas como ele muda após se o window for maior >=20, no jquery;

3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente;

CODIGO HTML

    <nav class="navbar navbar-light navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false">
                    <span class="fa fa-bars"></span>
                </button>
                <a href="http://" class="navbar-brand brand-centered">
                    <img src="img/logo.png" class="img-responsive">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar_menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#mn_empresa">EMPRESA</a></li>
                    <li><a href="#mn_clientes">CLIENTES</a></li>
                    <li><a href="#mn_formulario">CONTATO</a></li>
                </ul>
            </div>
        </div>
    </nav>


CODIGO CSS

/* NAVBAR */
.navbar {
	padding-top: 5px;
	padding-bottom: 12px;
	background-color: transparent;
	margin: 0px;
	color: #333;
	transition: all 0.3s;
	z-index: 9999;

	-webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
	-moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
	box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
}


/* NAVBAR - efeito simples dos itens do menu */
.navbar-nav a,
.navbar-nav a.active {
	color: #00224b !important;
	background-color: transparent;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
	color: #f4511e !important;
	background-color: white;
	font-weight: 600;
	width: 100%;
}


/* NAVBAR - toggle button */
.navbar-light .navbar-toggle {
	border: none;
	border-radius: 40px;
	width: 40px;
	height: 40px;
	font-size: 20px;
	z-index: 12;
	background-color: dodgerblue;
	color: white;
	cursor: pointer;
	-moz-transition: all .8s;
	-o-transition: all .8s;
	-webkit-transition: all .8s;
	transition: all .8s;
}

.navbar-light .navbar-toggle:hover {
	background-color: #f6761c;
	border-radius: 40px 0px 40px 40px;
	color: white;
}


/* NAVBAR - mudanças jquery */
.navbar-brand.nav_corlogo {
	height: auto;
	filter: brightness(0) invert(1) !important;
}

.navbar-nav.nav_cormenu a,
.navbar-nav.nav_cormenu a.active {
	color: white !important;
}

.navbar-nav.nav_cormenu li a:hover,
.navbar-nav.nav_cormenu li.active a {
	color: #ff9326 !important;
	background-color: transparent;
}

.navbar.nav_sombra {
	-webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39);
	-moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39);
	box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39);
	border-bottom: 2px solid rgba(118, 0, 191, 0.56);
}

.navbar.nav_comprime {
	padding-top: 10px;
	padding-bottom: 10px;
	background: #002a5c;
	color: white;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	-moz-transition: all .4s;
	-o-transition: all .4s;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.navbar.nav_slide {
	background-color: transparent !important;
}


/* NAVBAR - config do logotipo imagem e logo texto */
.navbar-brand {
	padding: 4px;
	position: absolute;
	font-size: 1.25rem;
	white-space: nowrap;
}

.navbar-brand>img {
	padding: 0px;
	width: 16%;
}

.navbar-brand:focus,
.navbar-brand:hover {
	text-decoration: none;
	color: white
}


CODIGO JQUERY
 

$(function () {
        $(window).on('scroll', function () {

            if ($(this).scrollTop() >= 20) {
                $('.navbar').addClass('nav_comprime');
                $('.navbar').addClass('nav_sombra');
                $('.navbar-nav').addClass('nav_cormenu');
                $('.navbar-brand').addClass('nav_corlogo');

            } else {
                $('.navbar').removeClass('nav_comprime');
                $('.navbar').removeClass('nav_sombra');
                $('.navbar-nav').removeClass('nav_cormenu');
                $('.navbar-brand').removeClass('nav_corlogo');
            }

        });

        $('.navbar a').on('click', function () {
            if (window.innerWidth <= 768) {
                $('.navbar-toggle').trigger("click");
            }
        });

        //função que troca em resoluções menores o logotipo
        $(window).resize(function () {
            if ($(window).width() < 481) {
                $('#logotipo').attr('src', '../site/img/simbolo.png');
            } else {
                $('#logotipo').attr('src', '../site/img/logo_-_original.png');
            }
        });

        $(".navbar a, footer a[href='#wrapper']").on("click", function (event) {
            event.preventDefault();
            var hash = this.hash;

            $("html, body").animate({
                scrollTop: $(hash).offset().top
            }, 800, function () {
                window.location.hash = hash;
            });

        });

    });

Se conseguirem me dar uma luz, agradeço.
Posso estar errando no CSS ou JQUERY.
Obrigado.


 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por dieef5
      Boa noite pessoal,
       
      Estou com um problema e gostaria da ajuda dos amigos:
      Em uma página de escolha de forma de pagamento gostaria de fazer aparecer uma div que está oculta quando seleciono a opção pelo radio button.
      Funciona ok clicando direto no radio button, porém o radio button também é selecionado ao clicar sobre o nome da opção na DIV (exemplo: Boleto Bancário). E quando clico sobre o nome da opção a DIV oculta não aparece.
       
      Gostaria de exibir a DIV oculta tanto ao clicar sobre o nome Boleto bancário como ao clicar no radio button.
       
      o html é mais ou menos assim:
      <div class="selection row"> <div class="col-xs-6 text-left"><strong>Boleto Bancário</strong> 10% de Desconto</div> <div class="col-xs-6 text-right"><input type="radio" name="payment" value="boleto" checked="checked" /></div> </div> <div id="campos"> Exibe instrução <div  
      Meu jquery está assim:
      $("input[name=payment]").change(function(data){ var selection = $("input[name=payment]:checked").val(); console.log(selection); if(selection != "boleto") $("#campos").hide(); else $("#campos").show('fast'); }); $("#campos").hide();  
      VLw pessoal..
       
    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
    • Por Alphb
      Oii, podem me ajudar
       
      Tipo com o <img>
      Eu adiciono a imagem tipo width:100%;
      Height:100%;
      Esses 100% não deveria ser 100% do width/height da imagem, mas ela ta ocupando os 100% da div até mesmo do body todo ._.
       
      Tipo eu quero deixar a imagem pequena mas proporcional 
      Pq não vai ser só uma imagem vai ser varias de tamanho diferente e ela ficam grande só com <img> sem CSS
      Já tentei Max-width/height, Min-width/height
      E não tou fazendo com PX pq se alguém acessar o site com um tablet o PX vai ser maior doq no smartphone._.
       
      E quando ta perfeito o height ta um pouquinho grande além do tamanho proporcional ao da width e fica aquela imagem meio esticada e fora de resolução
       
      Exemplo no facebook as imagens dos posts ficam proporcionais e quando não a imagem corta e se clicar na imagem fica tela cheia e a imagem fica perfeita sem perda
    • Por sacjamm
      Boa tarde amigos,
      Estou montando uma lógica para um site de vídeos, só que não sei como proceder com PHP.
      O site funciona com assinatura, o usuário se cadastra e cria assinatura, se a assinatura dele estiver paga, ele é um assinante.
      Tenho uma tabela de vídeos no banco de dados que tem os campos de privacidade, e seta se o vídeo é público ou privado, tem um outro campo que seta se o vídeo será mostrado para usuário assinante ou não, com essa informação, como eu devo proceder com essas condições abaixo?
      A ideia é que se a lógica for verdadeira, o usuário, pode assistir os vídeos, se for falso, ele vai ver imagem com link para fazer assinatura.
      USUARIO NAO LOGADO:
      Assiste: Videos Publicos e Postado para não assinantes
      Enxerga: Ele vai enxergar os videos para assinantes porem com a tela black de proteção chamando pra assinar
      USUARIO LOGADO E NAO ASSINANTE OU COM ASSINATURA PENDENTE OU CANCELADA
      Assiste: Videos Publicos e Postado para não assinantes e os Próprios videos que ele posta
      Enxerga: Ele vai enxergar os videos para assinantes de outros pessoas porem com a tela black de proteção
      USUARIO LOGADO E ASSINATURA ATIVA E PAGA
      Assiste: Ele Assiste Públicos e Privado de Todo mundo
      Enxerga: Ve tudo menos os videos que cada usuario colocou como privacy.
       
      Vejam: http://play.hdclipsbr.com
    • Por ghlevin
      Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php
       
      head.php original:
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links):
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte:
      Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.