[Support request] Custom header with transition in scroll

Home Forums Support Custom header with transition in scroll

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1220504
    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.

    #1220639
    David
    Staff
    Customer Support

    Hi there,

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

    #1221016
    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

    #1221338
    Leo
    Staff
    Customer Support

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

    #1445986
    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

    #1446071
    Leo
    Staff
    Customer Support

    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

    #1446161
    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

    #1446346
    Leo
    Staff
    Customer Support

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

    #1447532
    Leo
    Staff
    Customer Support

    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 😉

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.