- This topic has 9 replies, 2 voices, and was last updated 3 years, 7 months ago by Leo.
-
AuthorPosts
-
March 31, 2020 at 2:51 am #1220504Alberto
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 #1220639DavidStaffCustomer SupportHi there,
can you share a link to the actual site you’re having the issue with so we can take a look
March 31, 2020 at 8:49 am #1221016AlbertoHi 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 #1221338LeoStaffCustomer SupportWe would really need to see the issue live to be able to help. Any chance you can create a staging site for it?
September 16, 2020 at 8:42 am #1445986AlbertoHello
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 #1446071LeoStaffCustomer 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-headerSeptember 16, 2020 at 10:49 am #1446161AlbertoHi 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 #1446346LeoStaffCustomer 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; }
September 17, 2020 at 9:50 am #1447462AlbertoHi 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 #1447532LeoStaffCustomer 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 😉
-
AuthorPosts
- You must be logged in to reply to this topic.