Hide Title Bar and ''View All" on Universal Results

Search Best Practices - Search Front-End
1

Hi Team!

I am adding a promo vertical to a client’s Answers experience
code

current
current841×349 32.3 KB

first citizens
first citizens1315×594 44.4 KB

. We are doing this by not creating a page for the vertical and only wanting the promo content to appear in Universal results. This is based off First Citizen’s promo content in their experience.

I am attempting to hide the title bar that displays the title of the vertical as well as the ‘View All’ button, basically so just the cards appear. I have the attached code in my answers.scss file but am not seeing any updates. Any help would be appreciated! I feel like i am close but just missing something.

Have attached a screenshot of current code and live preview, and the First Citizen’s promo content that we want this to appear like.

Thank you!

2

oops did not realize the screenshots would appear like that!

3

Update - I’ve realized that the .HitchhikerResultsStandard-title class is what i’m looking for, but I now need a way to target it on a specific vertical. When I apply ‘display:none’ to the class, every title bar disapears (see screenshot).

Any help would be great!

Garrett
new code
new

4

Hi @Garrrett_Prellberg ,

In order to target just one vertical’s title, you’ll just need to use a slightly more specific selector.

In the below screenshot example, you’ll notice that the Help Articles vertical section has three classes applied to it, one of which is a vertical-specific class: “HitchhikerResultsStandard–help_articles”.

Hide Title Screenshot
Hide Title Screenshot1920×937 235 KB

Using this, you can target only the title for that particular vertical. For this example, I would use CSS to target the “.HitchhikerResultsStandard-title” that lives within the Help Articles section shown above, which I’ll specify by targeting all three classes it has:

.HitchhikerResultsStandard.HitchhikerResultsStandard--help_articles.HitchhikerResultsStandard--universal .HitchhikerResultsStandard-title {
    display: none;
  }

You can do the same thing to hide the “View All” text at the bottom for that specific vertical. For this example, it would look like:

.HitchhikerResultsStandard.HitchhikerResultsStandard--help_articles.HitchhikerResultsStandard--universal .HitchhikerResultsStandard-viewMore {
    display: none;
  }

Let me know if this works for you!

Best,
DJ

5

Hey DJ! This is fantastic, thank you! Using the inspect tool to find the class was where I was getting lost as I was trying to base my work off an experience that had different naming conventions for the classes.

Thank you again!

Garrett

1 Like