- This topic has 9 replies, 2 voices, and was last updated 7 months ago by
Leo.
-
AuthorPosts
-
March 31, 2020 at 2:51 am #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.
March 31, 2020 at 5:37 am #1220639David
StaffCustomer SupportHi 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/March 31, 2020 at 8:49 am #1221016Alberto
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
March 31, 2020 at 1:12 pm #1221338Leo
StaffCustomer SupportWe 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/September 16, 2020 at 8:42 am #1445986Alberto
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
September 16, 2020 at 9:42 am #1446071Leo
StaffCustomer SupportFor 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-headerDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 16, 2020 at 10:49 am #1446161Alberto
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
September 16, 2020 at 1:53 pm #1446346Leo
StaffCustomer SupportAhh 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/September 17, 2020 at 9:50 am #1447462Alberto
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
September 17, 2020 at 10:29 am #1447532Leo
StaffCustomer SupportTry setting a
px
number instead ofauto
for theheight
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/ -
AuthorPosts
- You must be logged in to reply to this topic.