Best Answer

Let's play - hide that header

  • 30 September 2021
  • 6 replies
  • 297 views
dklinger
Rank
Userlevel 7
Badge +6

Howdy folks,

Have you ever played Hide that Header with CSS?

Well - I have a situation where I need to hide the header to avoid having some folks seeing that search bar and left hand hamburger menu….I need to give them the one page and the most vanilla experience possible.

It is only for a specific page - and I have learned how to adjust the css for a page by working with the page ID.

But if you have pulled this off? And are open to sharing it? Can you let me know how you have been hiding the header? Happy to mark you for the correct answer :smile:

PS - I do know there is a function for replacing the entire header with something else….that is when I grow us up and can afford to have a sandbox of a site.

icon

Best answer by alekwo 7 October 2021, 18:37

View original

6 replies

dklinger
Rank
Userlevel 7
Badge +6

How about hide that seach bar in the header???? :grinning:

alekwo
Rank
Userlevel 7
Badge +1

@dklinger 

If you want to make it invisible without affecting the overall page layout

doc-layout-internal-header {
    visibility: hidden;
}

if you want to remove it completely from the page (shifting everything up)

doc-layout-internal-header {
    display: none !important;
}

 

How about hide that seach bar in the header???? :grinning:

doc-layout-global-search-boxed {
  visibility: hidden;
}

-- Alek Oleszkiewicz - linkedin.com/in/aleko
alekwo
Rank
Userlevel 7
Badge +1

PS. In Firefox browser, in the Web Developer Tools there is a “Style Editor” - where you can add new or edit existing CSS on the page and observe changes in real-time.

It’s very handy, as you can play with the CSS in your own browser without changing the configuration of your platform, and only update the style configuration in Docebo once ready.

-- Alek Oleszkiewicz - linkedin.com/in/aleko
dklinger
Rank
Userlevel 7
Badge +6

Good morning @alekwo/.Thank you for the awesome share.

So I found myself playing with something like that (I was using the developer tools in Chrome)? And I found myself not being able to impact the single page (I do believe you are right though - these would work globally).

Folks we may also want to call this out? You may want to be very very careful with these css tweaks here as messing with your internal header can take you away from your admin tools in your instance and result in a call to support.

I love the change to remove the search bar though….people get hot or cold on it all the time. I am waiting for the day that someone says - ya know? Take that thing down - it isnt being helpful at all.

So Alek - if you can think of a way to impact these on a single page? Well? I am sold! :grin: And you will get the best answer. da da da….

 

 

alekwo
Rank
Userlevel 7
Badge +1

Hi @dklinger unfortunately, as far as I know, it’s not possible (without using JavaScript) to make a CSS selector that will only be applied to a specific URL.

A few years ago, there was a plan to include a @document rule in the standard, but it wasn’t incorporated into the specification (more here https://developer.mozilla.org/en-US/docs/Web/CSS/@document)

-- Alek Oleszkiewicz - linkedin.com/in/aleko
dklinger
Rank
Userlevel 7
Badge +6

So I believe @alekwo is going to take the cheese on this one - because I am not seeing another way to impact those with impacting them globally….boo hoo…maybe it is time for another idea - a check box in the Page Composer to disable the header on a page on the fly…..

Reply


Terms & ConditionsCookie settings