Home Forums Porto Template reveal search

This topic contains 5 replies, has 2 voices, and was last updated by  skab12 1 week, 4 days ago. This post has been viewed 68 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10030895

    skab12
    Participant

    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.


    #10030898

    Support2
    Keymaster

    Hello, 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/maNjznCD

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 week, 5 days ago by  Support2.
    #10030902

    skab12
    Participant

    Thank 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?


    #10030904

    Support2
    Keymaster

    Hello,

    Thanks for the link.

    1) First remove all data-hash and data-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/7vG0WQ41

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030905

    skab12
    Participant

    Hello 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


    #10030906

    skab12
    Participant

    Hi Rodrigo,

    It works!! Fixed !!

    Thank you really much for your help!


Viewing 6 posts - 1 through 6 (of 6 total)