Site Search

[ErinKas]

Hello community!

I have a BIG design ask if anyone is up for it. I need someone to help me move our menu bar more to the left and then have the search input box to the right of the menu bar. We would also like it to be gray and match the font on the website. www.omniresources.com

Then, the search results page we need some help to get the margins right. Right now the text flows from one side to the other with no space....

Can anyone help? I got this response from HubSpot Support but I dont know what to do with it!

They recommended targeting `.hs-search-field` `.hs-search-field__bar` and `.hs-search-field__input` for these, and working with a designer on this would be a pretty simple task

ThankS!!!!!!!

[NLacaria]

@tjoyce Any chance you can assist with ours?

[tjoyce]

@NLacaria - I can try and help, do you have a link?

[NLacaria]

https://www.boardroominsiders.com/blog and https://www.boardroominsiders.com/hs-search-results . No matter what i do, i cannot get the search bar to "live" inside the module. If you look at the main page, where it says experience it for yourself in the orange box at top, i wanted to make the search page look like that instead of next to each other as it currently looks on the search page. I wanted to obvoisly change the text to something like search our site and then have the search bar look intertwined with the text above it, but no matter the CSS i use makes it act properly. So i split the modules and spaced them so they look inline with the text on the right.

[ErinKas]

@tjoyce would you be able to help?? 🙂 Pretty please??

[tjoyce]

Hi @ErinKas - Sure, what page are we working with? Is this a landing page? Do you have a preview link?

[ErinKas]

Hi @tjoyce we want to put site search in our header global group which is on all of the website pages. https://www.omniresources.com/ its the white bar across all webpages. Does that help?

[tjoyce]

Thanks @ErinKas - that does help, however, you're going to have to do some things for us so we can give you some code back (keeping in mind, we don't want to destroy the design of your current site while developing the new feature).

Can you please do the following:

1. Go to design tools and clone the module you will be editing

2. clone a page in your website and replace the current header module with the new clone

3. in the cloned header module, add the search module next to the menu

4. give us the preview link to the new cloned page so we can give you some css or javascript back

Let me know if any of those steps don't make sense.

[ErinKas]

Ok, here it is. http://www.omniresources.com/testing?hs_preview=apYwmOWk-6155196473

right now the search box is on top of the menu. I am not a fan AT ALL of the new Design Manager 😞

We want the search box to be smaller, font to match the site, color to be a light gray, and the search box to be to the right of the menu (have to move menu more to the left)

I know this is a BIG ask, THANK YOU THANK YOU THANK YOU!

[tjoyce · Accepted solution]

thanks @ErinKas - That's perfect. Ok, here's some code (I took some design and functionality liberties that I think you should like)

Add this CSS to your stylesheet:

.hs-search-field-super-wrapper {
    position: absolute;
    right: 0;
    top: 80px;
    background: rgba(3, 3, 3, 0.78);
    padding: 30px;
    max-width: 280px;
    border-radius: 3px;
    display:none !important;
}

.hs-search-field-super-wrapper.active {
    display:block !important;
}

.hs-search-field__bar form input {
    background: #80808052;
    border: none;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid gray;
    color: white;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 7px 47%;
    padding-left: 40px;
    font-family: 'Roboto Condensed' !important;
}

.hs-search-field__bar form:before {
    content: '';
    cursor: pointer;
    position: absolute;
    font-family: 'fontawesome';
    top: 13px;
    right: 10px;
    color: white;
}
.search-trigger {
    cursor: pointer;
}

and add this javascript to your js file:

$(function(){
  $('.hs-search-field__bar').closest('.widget-type-custom_widget').addClass('hs-search-field-super-wrapper');
  $('.main-nav>div>span>div>ul').append('<li class="search-trigger hs-menu-item hs-menu-depth-1"><i class="fa fa-search"></i></li>');
  $('.search-trigger').on('click', function(){$('.hs-search-field-super-wrapper').toggleClass('active');});
});

Here is what your final result should look like (watch the video): 

https://monosnap.com/file/BELcIXYg0WHzcWUQTtWio9LF1QjQXQ

[ErinKas]

OMG @tjoyce ARE YOU FOR REAL????? That is EXACTLY what my boss was looking for.  YOU ARE SIMPLY AMAZING!!!!!. 

Couple questions. 

1. Where in the css is a good place to put something like that?

2. I have never edited a java script file - can you help with how I go about that?

Thank you so so so so stinking much! This is so amazing.

[tjoyce]

@ErinKas - Awesome 😄 glad you dig it!

Okay, so the css and js can go almost anywhere.

I think i saw an "advisors.css" file that you have, you can drop it all the way at the bottom of that.

And for the javascript, that can go almost anywhere as well - you have an "advisors.js" file where that could probably go. Just put it all the way at the bottom of the file.

[ErinKas]

GOT IT!!!! You are so totally awesome. Seriously. Cannot thank you enough! 

Couple issues tho....The search function only works on the home page? Its on all the pages, but the window doesnt pop up?

Other issue...The search results page.....Looks pretty rough. Any thoughts on how I can fix that?

@tjoyce

[tjoyce]

@ErinKas - I had you make a clone of the global module so we could test... did you add the search to the real module as well? That could be why it isn't showing up on other pages

[ErinKas]

@tjoyce its showing on all the pages, the pop up box just doesnt open on all the pages.

[tjoyce]

@ErinKas - Yea, that's because the form itself isn't on all pages. Don't let the search icon fool you, that's being injected with the javascript you added. The search form is just missing from your main global module.

[ErinKas]

@tjoyce not following....sorry. See screen shot? Isnt this correct?

[ErinKas]

I got it!!!!!! 🙂

Thank you so so so much again. If you have any thoughts on the search results page, please let me know!

[tjoyce]

@ErinKas - yea, I do 😄

Go to edit the search results page (not the template) and at the top click Settings -> advanced -> footer HTML and then drop this in there:

<script>
$(function(){
    $('.hs-content-id-0 .intro').addClass('about-section');
    $('#hs_cos_wrapper_module_1520438259515148').css({'margin-top':'50px', 'margin-bottom':'30px'});
    $('#hs_cos_wrapper_module_1536331441298284').hide();
    $('.hs-content-id-0 .intro').prepend($('#hs_cos_wrapper_module_1520438259515148'));
});

</script>

Also, drop this in the header HTML so you can get your logo to appear:

<style>
.header-container .widget-type-logo img {
    visibility: visible !important;
}
</style>

[ErinKas]

Hmmm @tjoyce I cant update that actual page........ I think its just a template.

[tjoyce]

@ErinKas - i see, in that case, just put that stuff in the template... see this screenshot for guidance.

https://monosnap.com/file/BOPF1kSpr3tOXSIlpMQMzg3149pc0t