# Site Search

**URL:** <https://community.hubspot.com/t/site-search/10092>\
**Category:** CMS Development\
**Created:** [September 6, 2018, 7:06pm UTC](https://community.hubspot.com/t/site-search/10092 "2018-09-06T19:06:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 6, 2018, 7:06pm UTC](https://community.hubspot.com/t/site-search/10092/1 "2018-09-06T19:06:07Z")

</div>

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](http://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!!!

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:16am UTC](https://community.hubspot.com/t/site-search/10092/2 "2018-09-07T02:16:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 11:37am UTC](https://community.hubspot.com/t/site-search/10092/3 "2018-09-07T11:37:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 11:48am UTC](https://community.hubspot.com/t/site-search/10092/4 "2018-09-07T11:48:32Z")

</div>

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/](https://www.omniresources.com/) its the white bar across all webpages. Does that help?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 11:54am UTC](https://community.hubspot.com/t/site-search/10092/5 "2018-09-07T11:54:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 12:40pm UTC](https://community.hubspot.com/t/site-search/10092/6 "2018-09-07T12:40:03Z")

</div>

Ok, here it is. [http://www.omniresources.com/testing?hs\_preview=apYwmOWk-6155196473](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!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 1:41pm UTC](https://community.hubspot.com/t/site-search/10092/7 "2018-09-07T13:41:48Z")

</div>

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:

```auto
.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:

```auto
$(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):

> **[Monosnap - Screenshot Tool with Cloud Storage](https://monosnap.ai/file/BELcIXYg0WHzcWUQTtWio9LF1QjQXQ)**
>
> Monosnap screenshot tool for Mac and PC with own cloud storage. Take screenshots, record videos and upload files directly to the cloud. Just in one click.

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:15pm UTC](https://community.hubspot.com/t/site-search/10092/8 "2018-09-07T14:15:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 2:21pm UTC](https://community.hubspot.com/t/site-search/10092/9 "2018-09-07T14:21:23Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:29pm UTC](https://community.hubspot.com/t/site-search/10092/10 "2018-09-07T14:29:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 2:32pm UTC](https://community.hubspot.com/t/site-search/10092/11 "2018-09-07T14:32:19Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:36pm UTC](https://community.hubspot.com/t/site-search/10092/12 "2018-09-07T14:36:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 2:38pm UTC](https://community.hubspot.com/t/site-search/10092/13 "2018-09-07T14:38:13Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:41pm UTC](https://community.hubspot.com/t/site-search/10092/14 "2018-09-07T14:41:05Z")

</div>

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

 ![homepage.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/1/91b372c84ab3556e65af76abeeab8b0ef3dd177c.png)

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 2:44pm UTC](https://community.hubspot.com/t/site-search/10092/15 "2018-09-07T14:44:47Z")

</div>

I got it!!! 🙂

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 2:54pm UTC](https://community.hubspot.com/t/site-search/10092/16 "2018-09-07T14:54:08Z")

</div>

@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:

```auto
<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:

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

```

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 3:07pm UTC](https://community.hubspot.com/t/site-search/10092/17 "2018-09-07T15:07:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErinKas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erinkas/32/99745_2.png) [@ErinKas](https://community.hubspot.com/u/ErinKas)\
**Post date:** [September 7, 2018, 3:10pm UTC](https://community.hubspot.com/t/site-search/10092/18 "2018-09-07T15:10:08Z")

</div>

@tjoyce I GOT IT!

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [September 7, 2018, 3:11pm UTC](https://community.hubspot.com/t/site-search/10092/19 "2018-09-07T15:11:51Z")

</div>

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

> **[Monosnap - Screenshot Tool with Cloud Storage](https://monosnap.ai/file/BOPF1kSpr3tOXSIlpMQMzg3149pc0t)**
>
> Monosnap screenshot tool for Mac and PC with own cloud storage. Take screenshots, record videos and upload files directly to the cloud. Just in one click.

---

<div class="post-metadata">

**Author:** ![NLacaria](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlacaria/32/2490_2.png) [@NLacaria](https://community.hubspot.com/u/NLacaria)\
**Post date:** [August 31, 2021, 6:29pm UTC](https://community.hubspot.com/t/site-search/10092/20 "2021-08-31T18:29:22Z")

</div>

@tjoyce Any chance you can assist with ours?

[Next page](https://community.hubspot.com/t/site-search/10092.md?page=2)