Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 7

How to add a Search Block to the header?


jpwv

Question

  • Answers 58
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

Hi there,Im also wanting to add a search block to my header but im using the pacific template and this CSS code doesnt work for me. It sits in the footer too.

Does anyone know the right trickery for the pacific template (the scrolling page)

Thanks!

Link to comment
  • 0

I added that code to the code injection for the header and nothing seems to happen. It still says " search" as the last button on the nav bar- no block. What could be the problem? Again, Thank you so much for you response! I can't tell you how much I appreciate it!

Link to comment
  • 0

I tried this code and it did put a search block in header. I did not play with trying to position it. Instead I put the search block in footer. Just normal editing to place it there. However, I did make my ishimoto footer full width.


<div id="search-wrapper" data-kbjs-widget="search-widget" data-autocomplete="true" data-search-id="nav-search">
         <form action="/search-results">
           <button type="button" id="search-button"></button>
           <input type="text" id="nav-search-box" name="q" placeholder="Search">
           <p class="search-instructions hidden">Press enter</p>
         </form>

Link to comment
  • 0

Not sure. I did not use the search in header on my website, so I did not investigate it further.It's possible that this code worked for earlier SqSp version.

@arthurm above seems to be suggesting adding a search page to your header navigation menu with some added trickery.
Or you could just have a page with the search function by itself? Not elegant, but functional.

Link to comment
  • 0

Not sure. I did not use the search in header on my website, so I did not investigate it further.It's possible that this code worked for earlier SqSp version.

@arthurm above seems to be suggesting adding a search page to your header navigation menu with some added trickery.
Or you could just have a page with the search function by itself? Not elegant, but functional.

Link to comment
  • 0

Any idea how to make this work on the Bedford template? I tried the code and it only modified the search block at the footer. It didn't replace the link at the header with the search box. Thanks!

Link to comment
  • 0

Any idea how to make this work on the Bedford template? I tried the code and it only modified the search block at the footer. It didn't replace the link at the header with the search box. Thanks!

Link to comment
  • 0

I've been searching all over for a thread that would help with the search bar and I am glad to say it worked! Thank you. Unfortunately, I realized that it replaced the last link in all of the folders to a search bar. Is there a way I can fix this? I am using the marquee template. I used the original coding that silvabokis posted for the aviator template rather than the one twearked for marquee. The marquee one didn't work at all, but this one did, except for that little problem. My site is www.voyageune.com/home if that helps

Link to comment
  • 0

I've been searching all over for a thread that would help with the search bar and I am glad to say it worked! Thank you. Unfortunately, I realized that it replaced the last link in all of the folders to a search bar. Is there a way I can fix this? I am using the marquee template. I used the original coding that silvabokis posted for the aviator template rather than the one twearked for marquee. The marquee one didn't work at all, but this one did, except for that little problem. My site is www.voyageune.com/home if that helps

Link to comment
  • 0

Hi everyone,

I created a search link using SQSP Guru's tutorial: http://www.sqsp.guru/news/squarespace-updates-the-search-block

However, I am using the Five template, and on my search page, I have my site-wide sidebar that shows up (this is a feature specific to Five). The problem is that the /search page does not have a settings page to allow me to turn off the sidebar for this page.

Does anyone have a workaround?

Link to comment
  • 0

Hi, thanks for this advice it has been really helpful!I have a question though, I have placed my search bar into my header - But I noticed that when you type something into the search bar and results start to appear it creates a lot of space to the right of the page. I think it does it for everyone? Because I looked at the sites linked here, and it's the same. Is there anyway to prevent the spare space from be created?

Link to comment
  • 0

Hi, thanks for this advice it has been really helpful!I have a question though, I have placed my search bar into my header - But I noticed that when you type something into the search bar and results start to appear it creates a lot of space to the right of the page. I think it does it for everyone? Because I looked at the sites linked here, and it's the same. Is there anyway to prevent the spare space from be created?

Link to comment
  • 0

I think I figured out a way to get rid of the spare space I was talking about -

Add this to the css editor


.yui3-widget.sqs-widget.yui3-searchpreviewdropdown.yui3-widget-positioned {
  position: relative;
  left: 731px;
  top: 69px;
  max-width: 200px;
}

I'm not sure if there is a simpler way to do it, but this worked for me. The max width should be the same as the chosen width of your search bar.

Link to comment
  • 0

Hi Silvabokis, I've tried to implement the code above into the Five template but it doesnt seem to work. I've fiddled with the code and got it displaying in the correct place...


<script type="text/javascript">
 $( init );
function init() {
$("#main-navigation > ul > li:nth-last-child(1) a").replaceWith($(".search-block"));
}
</script>

However now the search box doesnt work. If I strip back the code to #main-navigation the search works but this replaces the entire navigation.


<script type="text/javascript">
 $( init );
function init() {
$("#main-navigation").replaceWith($(".search-block"));
}
</script>

Any ideas?Site: healthandsafetyatworknz.squarespace.com

Link to comment
  • 0

Well I think I've figured a work around that gets the search bar in the right place and working correctly for the Five template. I'm not great at coding so if there's a better way to do this I'll take suggestions!


<script type="text/javascript">
$(window).load(function(){
  $(".search-block").insertAfter($("#main-navigation"));
});
</script>


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...