Jump to content

Header search bar - Need assistance!

Go to solution Solved by tuanphan,

Recommended Posts

Hey there! I'm new to this forum but not to Squarespace. I am totally stuck inside 'my box' and need someone else's perspective from 'outside my box' on the following.

I have a search bar added to the header by Custom CSS. I need help with this:

  • The Search input text is not aligned with the rest of the navigation links.
  • When a navigation link is active (for example, Contact), I want the underline of the active navigation link to be aligned with the border-bottom line of the header search box.

I would also love to get others' opinions on the styling, coding, and functioning of the header search bar, search results preview, and search result page.

Site: https://www.absorbiceland.is/search

No password is needed to take a look.

Any help and opinion greatly appreciated!

Screenshot 2024-04-12 at 06.41.48.png

Link to comment
  • Replies 8
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

23 minutes ago, tuanphan said:

You mean Search bar should be on this small red box?

image.thumb.png.c4e8a2ba057020604d73a97ee185ea82.png

No, that's part of the search bar on the system Search page:

image.thumb.png.8aed02c85b5b76935521ae6eb47d3cd6.png

I want the search bar in the site's header to have its border bottom aligned with the underline of active navigation links in the header's navigation menu and the Search input text of that search bar to be aligned with the navigation links' text - see, for example, when the Contact link is active and notice how the bottom border and Search input text are not in line with the rest of navigation links:

image.thumb.png.1484adf5b5b86ce383fa448177f74394.png

Link to comment

Can you disable this code? I think I can test new code, to move Search Bar into Navigation, so align problem will be easier to fix.

<script>
  /*Attribute search bar to header*/
  $(function(){
  let searchBlock = $('.fe-block-yui_3_17_2_1_1711999726209_7879 .sqs-block').attr('id','').addClass('header-search-bar');

  /*Place desktop search bar*/
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));

  /*Create & place mobile search link*/
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
   })
</script>

image.thumb.png.7a39b230c3e4a4c95d5e4c2a4e646a22.png

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
21 minutes ago, tuanphan said:

Can you disable this code? I think I can test new code, to move Search Bar into Navigation, so align problem will be easier to fix.

Thank you!

Done - I've disabled this code.

The Search Bar is located in the footer.

Link to comment
  • Solution

Try this new code (I adjusted some IDs)

<script>
  /*Attribute search bar to header*/
  $(function(){
  let searchBlock = $('.fe-block-yui_3_17_2_1_1711999726209_7879 .sqs-block').attr('id','').addClass('header-search-bar');

  /*Place desktop search bar*/
  $(searchBlock).appendTo($('nav.header-nav-list'));

  /*Create & place mobile search link*/
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
   })
</script>
<style>
  nav.header-nav-list .sqs-block, nav.header-nav-list input {
    padding: 1px !important;
}
</style>

 

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

Create an account or sign in to comment

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


×
×
  • 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.