Home › Forums › Porto – Responsive HTML5 Template › reveal search
- This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by skab12. This post has been viewed 922 times
-
AuthorPosts
-
October 8, 2019 at 2:00 pm #10030895skab12Participant
Hi,
I would like to have the same search feature as the following link: https://portotheme.com/html/porto/7.5.0/index-blog.html.
Unfortunately, when I copy this part of the code, I can not reproduce it. The click is not detected. When I put manually the ‘show’ attribute to class, it works which is not the case when I click on the search button.
What do I miss?Thank you for your answer.
October 8, 2019 at 11:12 pm #10030898Support2KeymasterHello, thanks for your purchase.
To get this search form working you need this HTML to trigger the search overlay:
<div class="header-nav-features"> <div class="header-nav-features-search-reveal-container"> <div class="header-nav-feature header-nav-features-search header-nav-features-search-reveal d-inline-flex"> <a href="#"><i class="fas fa-search header-nav-top-icon"></i></a> </div> </div> </div>
And this HTML (that’s the overlay with search input):
<div class="header-nav-features header-nav-features-no-border p-static"> <div class="header-nav-feature header-nav-features-search header-nav-features-search-reveal header-nav-features-search-reveal-big-search header-nav-features-search-reveal-big-search-full"> <div class="container"> <div class="row h-100 d-flex"> <div class="col h-100 d-flex"> <form role="search" class="d-flex h-100 w-100" action="page-search-results.html" method="get"> <div class="big-search-header input-group"> <input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="Type and hit enter..."> <a href="#"><i class="fas fa-times header-nav-top-icon"></i></a> </div> </form> </div> </div> </div> </div> </div>
Here is a full header code example:
https://pastebin.com/raw/maNjznCDPlease try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
- This reply was modified 4 years, 5 months ago by Support2.
October 9, 2019 at 2:28 am #10030902skab12ParticipantThank you for your answer Rodrigo.
Unfortunately, it still does not work. I tried first to update my code but no popup. Then, I replace My code by yours and still no popup.
You can have a look at http://momentz.fr/
Any ideas of what can go wrong?
October 9, 2019 at 6:26 am #10030904Support2KeymasterHello,
Thanks for the link.
1) First remove all
data-hash
anddata-hash-offset="xx"
attributes from your page. As you are not using scroll to anchor feature you don’t need this attributes and they are causing a JS error that’s blocking the javascript execution.2) I saw that you changed a bit the code of search feature. Please use this code below for your header:
https://pastebin.com/raw/7vG0WQ41Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
October 9, 2019 at 7:47 am #10030905skab12ParticipantHello Rodrigo,
Thank you for the update.
I changed my code as you suggested but it still not working. You can go to the previous link and see your update proposition (refresh cache).
Does it work for you? How can I make it work?
Thank you
October 9, 2019 at 8:00 am #10030906skab12ParticipantHi Rodrigo,
It works!! Fixed !!
Thank you really much for your help!
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.