Header elements only showing on homepage - present but invisible on all other pages

Hi there, my website is https://rhino-oval-jdpl.squarespace.com/

As you can see, on the homepage at the header there is a search bar, as well as a blue "Trades Open" button. These are embedded into the Footer with custom CSS to display in the header.

My problem is that the search bar and blue "Trades Open" button disappears once you leave the homepage. I can tell it is still there as when I hover over the space where they should be, I am able to click the button and use the search still, but again they are invisible which is the problem I need help to fix.

Any ideas or solutions would be greatly appreciated! Thank you!

https://rhino-oval-jdpl.squarespace.com/?noredirect

I see you added code to make search bar on Home Page Header Code Injection, so it will show on homepage only

You need to move the code to Site wide Code Injection Header or Footer

Hi there! Thanks for your response! Unfortunately, I will need more explanation.

My code for the search bar is under Code Injection, in the section labeled "HEADER - Enter code that will be injected into the 'head' tag on every page of your site."

And this is my code below, any ideas for what to do to make it appear on all pages? Thank you!

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
  let searchBlock = $('#block-yui_3_17_2_1_1691517085019_8992').attr('id','').addClass('header-search-bar');

 $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
  })
  </script>
<script>
  $(function(){
    let buttonBlock = $('#block-yui_3_17_2_1_1691526693378_7772')
    .attr('id', '')
    .addClass('header-button-bar');

    /*Place Desktop Search Bar*/
    $(buttonBlock).insertBefore($('.header-actions-action.header-actions-action--social'));

    /*Create & Place Mobile Search Link*/
    $(buttonBlock).clone().addClass('mobile-header-button-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
  })
</script>

Move the code to Code Injection > Footer

Hey @tuanphan thank you for the response, but that did not work. I really appreciate it!

For example, when you go to the Contact page, you can see the problem I am having on many pages on my website. The search bar and blue button are no longer in the top section of the website, for some reason they are still there (like on the homepage) but instead are invisible, but you can find them if you hover over where they should appear.

Thanks so much for your help to investigate! I wonder if others have this issue too.

Ah got it. You can use this code to Website Tools > Custom CSS to fix it

div.header-display-desktop div {
    opacity: 1 !important;
}

9 hours ago, tuanphan said:

Ah got it. You can use this code to Website Tools > Custom CSS to fix it

div.header-display-desktop div {
    opacity: 1 !important;
}

 

Amazing! Thank you!! @tuanphan  Is their CSS I can use to address the same issue for mobile? I tried duplicating the code and replacing desktop with mobile but that didn't work. Thank you in advance!

Thank you so much @tuanphan you've made my day!