Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
Jack Oliveira

MENU TRANSPARENTE FIXO

Pergunta

Ola galera bom dia..

Eu estou tentando colocar meu menu fazendo ele ficar transparente quando rolar a barra para baixo

fazendo que ele fica com uma masca preta porem transparente de forma que quando vai rolando pra baixo de pra ver 

o fundo

Ou seja que fique uma mascara preta porem clara não o preto forte de mais eu fiz só que esta claro de mais o fundo e já tentei mudar 

do jeito que quero  e não deu certo

Este é o meu css do navbar

/*================header Fixed Scroll======================*/
#header-fix.nav-affix .navbar {
  
   background: transparent !important; 
   background: solid 1px #000; 

  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  border-color: #000;
  transition: 0.3s; }

.header.nav-affix nav.navbar-toggleable-md.navbar-light .navbar-nav .nav-link {
  padding: 1.3em 1.3em;
  transform: translate(0, 0) scale(1);
  transition: 0.3s; }

.transperant nav.navbar-toggleable-md.navbar-light {
  background: transparent; }

Este é o menu que estou usando

        <!-- header -->
        <div id="header-fix" class="header fixed-top transperant">
            <nav class="navbar navbar-toggleable-md navbar-expand-lg navbar-light py-lg-0 py-4">
                <a class="navbar-brand mr-4 mr-md-5" href="./"><img src="img/20182018.png" width="30%" alt="Brond Bar"></a>
                <div id="dl-menu" class="dl-menuwrapper d-block d-lg-none float-right">
                    <button>Open Menu</button>
                    <ul class="dl-menu">

                        <li class="nav-item active dropdown">
                                <li><a href="/home">Home</a></li>
                               <li><a href="/sobre">Sobre</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">Explorar</a>
                            <ul class="dl-submenu">
                                <li><a href="/modulos/duvidas_frequentes">Dúvidas Frequentes</a></li>
                                <li><a href="/modulos/regras">Regras</a></li>
                               <li><a href="/modulos/contrato">Contrato</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                   <li><a href="/planos">Planos</a></li> </li>
                    <li><a href="/orcamento">Orçamento</a></li>
                 
                   <li><a href="/contato">Contato</a></li>

                     </li>

                    </ul>
                </div>
                <div class="collapse navbar-collapse " id="header-fix" class="header fixed-top transperant">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active dropdown"> <a class="nav-link" href="/home">Home</a>

                        <li class="nav-item active dropdown"> <a class="nav-link" href="/sobre">Sobre</a>

                        <li class="nav-item dropdown"> <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">Explore <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="/modulos/duvidas_frequentes">Dúvidas Frequentes</a></li>
                                <li><a href="/modulos/regras">Regras</a></li>
                               <li><a href="/modulos/contrato" target="_blank">Contrato</a></li>
                            </ul>
                        </li>

                        <li class="nav-item active dropdown"> <a class="nav-link" href="/planos">Planos</a>

                          <li class="nav-item active dropdown"> <a class="nav-link" href="/orcamento">Orçamento</a>



                       <li class="nav-item active dropdown"> <a class="nav-link"  href="/contato"> Contato</a></li>


                    </ul>
                </div>
            </nav>

             Se alguém poderem me dar uma ajuda ai por favor!

Compartilhar este post


Link para o post
Compartilhar em outros sites

0 respostas a esta questão

Recommended Posts

Até agora não há respostas para essa pergunta


×

Informação importante

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