Hiding global search tabs

Hey there! Give this a try.

Right-click the element you want to remove and click inspect.

On the inspector, click the ellipsis and select copy selector.

You’ll get something that looks like this.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4)

Then use can use the following CSS to remove it.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}

Thank you for sharing this @IanMonk , so if for example, we wanted to only have the Course Catalog tab show up on global search, we could possibly use something like:

/*test to remove tabs on global search*/
#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(1) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(2) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(3) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(5) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(6) {
    display: none;
}

Or is there a better way to concatenate that?

I’m not a CSS expert, but that’s where I’d start. I might include a comment for each indicating exactly what each tab the CSS is targeting and removing. 

I’m not sure if this a better way to concatenate, but you could group your selectors like this too.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(6),#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(5), #doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}

Here I am simply combining the selectors on a single line and separating them by a comma:

#selector1, #selector2, #selector3 {
    display: none;
}

I find this harder to read and comment on. Someone with more CSS background could probably identify a better way. 

Word of warning, those identifiers are deep and based on not one but two relative classes (the nth-child() ones). If Docebo releases an update that moves the tab order, adds new tabs, etc. this will begin hiding the wrong tabs and showing the hidden ones again.

Thank you @Bfarkas, it’s good to know of potential issues like this!

I have not tried it, but just looking at the block, you could probably trim each entry down to just this, which limits the risk level since far fewer classes and only one relative entry instead of two:

.dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}