Archived topic
Custom header with transition in scroll
9 replies · Started by Alberto on March 31, 2020
Hello
I try to achieve the same behaviour for the header as in https://arenatours.com
I'm using a Hook Element (inside-navigation) for the header (as David suggest here) with this code:
<div class="header-section">
<div class="header-section-1">
<div class="datos-contacto">
<p><a href="tel:+34911190540"><i class="fas fa-phone-alt"></i> +34 91 11 90 540</a></p>
<p><a href="mailto:reservas@arenatours.com"><i class="far fa-envelope"></i> reservas@arenatours.com</a></p>
</div>
</div>
<div class="header-section-2">
<div class="site-logo">
<a href="https://arenatours.com" title="Viajes Arenatours" rel="home">
<img class="header-image" src="http://localhost/arenatours.new/wp-content/uploads/2020/02/logo-arenatours-espanol.svg" alt="Logotipo de Viajes Arenatours" title="Viajes Arenatours">
</a>
</div>
</div>
<div class="header-section-3">
<div class="rrss">
<a href="https://www.facebook.com/arenatoursofficial" target="_blank" title="Arenatours en Facebook"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="https://twitter.com/arenatours" target="_blank" title="Arenatours en Twitter"><i class="fab fa-twitter fa-lg"></i></a>
<a href="https://www.instagram.com/arenatours" target="_blank" title="Arenatours en Instagram"><i class="fab fa-instagram fa-lg"></i></a>
<a href="https://www.pinterest.es/arenatours/" target="_blank" title="Arenatours en Pinterest"><i class="fab fa-pinterest fa-lg"></i></a>
</div>
</div>
</div>I'm reading this article: https://docs.generatepress.com/article/navigation-as-a-header/ But as I used the Hook Element, no Merge option is available.
I guess I can do it with CSS and Javascript, but I wonder if there's an easier way.
Thanks in advance.
Hi there,
can you share a link to the actual site you're having the issue with so we can take a look
Hi David
Thanks for replying!
I'm doing the development locally. Can I give you the information you need in any other way?
I'm trying to achive exactly what you can see in arenatours.com Is exactly the same header (in fact, I'm working in a new version of the site using GP) And I'm using the Hook Element I told you. Sticky navigation is turned on and little else...
Hope you can give me a hand.
Regards
We would really need to see the issue live to be able to help. Any chance you can create a staging site for it?
Hello
The website I'm working in is just in a server so I can provide an URL: prueba.arenatours.com
I need to achieve the same effect as in arenatours.com (transparent and size transition).
I'll appreciate any help.
Thanks in advance
For transparency, since you are already using a merged header element, you should be able to use these options:
https://docs.generatepress.com/article/header-element-overview/#site-header
Hi Leo,
I set up my header as David suggest (please, read the posts), and I need a transparency value when it starts and other with sticky one.
Any thoughts?
TIA
Alberto
Ahh that makes things a bit tricky. Something like this might help to get you started:
#site-navigation .inside-navigation {
background-color: transparent;
}
#sticky-navigation .inside-navigation {
background-color: #fff;
}Hi Leo!
Thanks for your suggest. It works for background transparency.
What about the logo size effect? It seems not to work if I try with transition: height time...
TIA
Try setting a px number instead of auto for the height in this CSS:
.main-navigation .inside-navigation .header-section .site-logo img {
height: auto;
-webkit-transition: height .5s ease-out;
-moz-transition: height .5s ease-out;
-o-transition: height .5s ease-out;
transition: height .5s ease-out;
}We really have to be careful with how much custom CSS help we provide in this forum ;)
