[SOLVED] Adding a code block (or a google custom search engine) to the site header (7.1)

Since I haven't been able to get the search block to work, I decided to go with Google's "Programmable Search" and just paste the HTML to a code block. However, I'd like to have the search bar in the header instead of taking up space on every page. Any suggestions would be greatly appreciated. Thanks!

Hi,

Can you share link to your site?

Hey @tuanphan

Sorry, just saw this!

site: https://tarantula-porcupine-bkrr.squarespace.com/

The password is 1234

On 9/26/2021 at 8:58 PM, dl_23 said:

Hey @tuanphan

Sorry, just saw this!

site: https://tarantula-porcupine-bkrr.squarespace.com/

The password is 1234

Hi,

You want to move this?

4 hours ago, tuanphan said:

Hi,

You want to move this?

Exactly!

5 hours ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('div#block-aada196faed00d4629aa').insertBefore('nav.header-nav-list');
	});
</script>
<style>
  .header-nav-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  div#block-aada196faed00d4629aa {
    flex-basis: 60%;
}
</style>

This worked great, thanks! However, is there a way to control the width of the search bar so that it doesn't push the header navigation links to two rows?

Edited to add: Nevermind. Just changed flex-basis to 40% and it worked. Thanks so much again!