Site Search

SOLVE
ErinKas
Top Contributor

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!!!!!!!

1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

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

View solution in original post

18 Replies 18
ErinKas
Top Contributor

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

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

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

ErinKas
Top Contributor

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?

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

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
Top Contributor

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!

0 Upvotes
tjoyce
Solution
Recognized Expert | Platinum Partner

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

View solution in original post

ErinKas
Top Contributor

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.

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@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
Top Contributor

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

 

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@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
Top Contributor

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

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@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
Top Contributor

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

0 Upvotes
ErinKas
Top Contributor

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
Recognized Expert | Platinum Partner

@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
Top Contributor

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

 

0 Upvotes
ErinKas
Top Contributor

@tjoyce I GOT IT! 

 

Again, Thank you so so much!  You are amazing and such a HUGE HELP!!!!!

tjoyce
Recognized Expert | Platinum Partner

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

https://monosnap.com/file/BOPF1kSpr3tOXSIlpMQMzg3149pc0t