Custom header with transition in scroll

[Alberto]

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.

[David]

Hi there,

can you share a link to the actual site you’re having the issue with so we can take a look

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

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

[Leo]

We would really need to see the issue live to be able to help. Any chance you can create a staging site for it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

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

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

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

[Leo]

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 😉

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts