Here is what we do

/** Hide the Header Bar **/
#doc-layout-title-bar {
    display: none;
}

Hope that helps!

You’re a legend. Thank you so much. :-)

how do we make the title bar hidden for some specific page? I want to hide this for the rest except for Specific Catalog page view?

Unfortunately, not all of the prebuilt pages have page tags to isolate. If you want to do select custom pages you just add: 

#doc-page-14

Where the number is the page you want to the beginning of the CSS you are using. 

For the built in pages there are a few that have tags, theres a table and more information about this here:

https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus#subtitle-5

@Bfarkas and others - I know this is an old thread but I’m running into the same problem and can’t seem to get this to work for a specific page.

I’m targeting a custom page with an ID of 89 and need to hide the title. The page icon/avatar is still showing no matter what I try, including:

#doc-page-89 #doc-layout-title-bar { display: none; }

Any ideas?

Ah, bad news. The bar is above the ID tag that specifies pages, so this seems to be an all or nothing modification, the #doc-page-89 won’t work and never exists so you won’t see any changes with it. Sorry.

Thanks @Bfarkas. I am somehow able to get rid of everything except for the avatar/page icon. 

I’ve tried probably everything I can think of to no avail. We had a vendor design and implement our original home page and no one likes the design but they were able to cover it up by using a background image for the entire page. I don’t want to do that but might go back and look at how they did that and maybe see if there’s something I can do to mimic but with a solid light gray color.

So two things:

1. #doc-layout-title-bar { display: none; } will kill just the standard title and icon, but across the board
2. If you had a vendor do stuff, you might have conflicting CSS or a different custom CSS adding an icon to the top there. Try moving the #doc-layout-title-bar { display: none; } to the top of your customizations to see if it overrides the changes. If it is a seperate custom, we won’t be able to help much without system access.

I just took a look at the css. What the vendor did is they added a wrapper div to the custom page and made it’s width 100% so that div covers everything. Then they added an image to it, which visibly covers up everything. Then they proceeded, within that wrapper div, to put divs to create the page elements. I am going to try to make my design work without going that route since I like the page titles and icons on the other pages. 

Not related to this but a different CSS hurdle I can’t seem to figure out: the three html widgets in the screenshot I sent - I am trying to apply border-bottom-right-radius to give that corner a curve. Works fine when testing in the browser but once applied to Docebo it doesn’t work. 

I used the recommended CSS and was left with the widget title at the top of the page.

I had to add “.common-widget-title” to the CSS to eliminate it. 

/** Hide the Header Bar **/
#doc-layout-title-bar, .common-widget-title
{ display: none; }

Before:

After:

Thanks @Bfarkas. I am somehow able to get rid of everything except for the avatar/page icon. 

I’ve tried probably everything I can think of to no avail. We had a vendor design and implement our original home page and no one likes the design but they were able to cover it up by using a background image for the entire page. I don’t want to do that but might go back and look at how they did that and maybe see if there’s something I can do to mimic but with a solid light gray color.

I realize this was months ago - but - If you “inspect” the page HTML, can you pull the “class” label for that icon and add it to your CSS to hide it? I’m new to this - so perhaps not. Just a thought.

@SStratton if you hide the class you hide it on all pages, which I was trying to avoid as I only wanted to hide it on the home page.