Jump to content

Click on Search icon to make search bar appear

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Q1. This will require Business Plan + Script code.

Q2. Add to Design > Custom CSS

/* resize search icon */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1609720252520_14008 {
    width: 5%;
    margin: 0 auto;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/10/2021 at 7:01 PM, SolveigTraeet said:

1. I have the Business plan, what script code do I need to be able to accomplish what I want?

2. Thank you @tuanphan, that fixed the size!

 

Add to Code Injection Header

<style>
  div#block-yui_3_17_2_1_1609719753415_7376 {
    display: none;
}
  .t-show {
  	display: block;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("div#block-yui_3_17_2_1_1609720252520_14008").click(function(){
  $("div#block-yui_3_17_2_1_1609719753415_7376").addClass("t-show");
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, SolveigTraeet said:

@tuanphan Thank you for replying with a script code! I am not able to click on the search icon, do you know why?

Try again with this code

<style>
  div#block-yui_3_17_2_1_1609719753415_7376 {
    display: none;
}
  .t-show {
  	display: block;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $("div#block-yui_3_17_2_1_1609720252520_14008").click(function(){
  $("div#block-yui_3_17_2_1_1609719753415_7376").addClass("t-show");
});
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/14/2021 at 7:48 PM, SolveigTraeet said:

@tuanphan Thank you for the code, but it still doesn't work when I inject the code in advanced-> Code injection Header. I don't know why this doesn't work?

Can you add the code? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • SolveigTraeet changed the title to Click on Search icon to make search bar appear

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.