Home Forums EZY Template Header transparent (multi-purpose-4.html) — passando a negro após scroll

This topic contains 4 replies, has 2 voices, and was last updated by  Support2 1 week, 1 day ago. This post has been viewed 62 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10030459

    lnossa
    Participant

    Bom dia
    Team Okler

    Seria possível obter o header do exemplo “multi-purpose-4.html” mas de forma a que o header-body passe a negro após o scroll. Se possível gostaria de anular qualquer efeito csstransforms3d (que suponho está na origem o muito pequeno mas perceptível sobe-e-desce do header).

    Muito obrigado
    Luis


    #10030460

    lnossa
    Participant

    Por favor ignorar no meu post anterior a parte “Se possível gostaria de anular qualquer efeito csstransforms3d (que suponho está na origem o muito pequeno mas perceptível sobe-e-desce do header)”. Não tenho conhecimento suficiente para afirmar que é iso que está na origem do “saltitar” do header. Agradecia muito apenas o header transparente a passar a negro, sem o shrink ou outro efeito.

    Obrigado
    Luis


    #10030469

    Support2
    Keymaster

    Olá Luis, bom dia.

    Para tornar o background “dark” quando rolar a página para baixo, adicione esta classe ao header:

    <header id="header" class="header-transparent header-transparent-dark header-transparent-sticky-deactive header-container-bottom-border"............

    Também adicione ao “header-nav-main”:

    <div class="header-nav-main header-nav-main-light header-nav-main-effect-1 header-nav-main-sub-effect-1">

    Eu consegui reproduzir o problem do “saltitar” que você mencionou. Nós vamos corrigir isso para a próxima versão do EZY. Por enquanto você pode adicionar este código no (css/custom.css):

    html:not(.sticky-header-active) #header.header-transparent .header-body {
        position: fixed !important;
    }

    Por favor tente isso e nos avise se precisar de mais ajuda.

    Att,

    Rodrigo.


    #10030471

    lnossa
    Participant

    Bom dia
    Rodrigo

    Muitíssimo obrigado pelo suporte.
    Por favor confirme-me apenas se não está faltando algo para o “hamburger. Ele desaparece após o scroll.

    Atenciosamente,
    Luis


    #10030474

    Support2
    Keymaster

    Olá Luis,

    Está faltando sim. Como mudamos a cor de fundo do header quando o “sticky” está ativo, precisamos também mudar a cor do “hamburguer”. Para isso mude o HTML do “hamburguer” para:

    <button class="header-btn-collapse-nav header-btn-collapse-nav-light ml-3" data-toggle="collapse" data-target=".header-nav-main nav">

    * Note que apenas removi a class on-sticky-dark.

    Por favor tente isso e nos avise se precisar de mais ajuda.

    Att,

    Rodrigo.


Viewing 5 posts - 1 through 5 (of 5 total)