Hide Logo Header for certain page

API & Customization
1

Hi there,

I’ve been trying to add some javascript to hide the logo header for a specific scene, with no success.

This is possible to do via CSS but only for all pages. And before Knack introduced the new header theme a couple months ago it was also possible to do it via Javascript for a specific scene. Was anyone able to?

Here is the code that I would think should work, but doesn’t:

$(document).on("knack-scene-render.scene_1", function(event, scene) {
      $("#knHeader").hide();
});

And here is the CSS code that does work for hiding it everywhere in the app:

.knHeader {
  display: none !important;
}

Thank you!

2

Hi @MGR try changing #knHeader to .knHeader in your JS code.

1 Like
3

Thank you for the suggestion Brad!
.knHeader is actually what I tried at first, but doesn’t work either…

4

Works for me, maybe the scene is a different number?

$(document).on('knack-scene-render.scene_2', function(event, scene) {
  $('.knHeader').hide();
})
5

Thank you Brad for testing it out. I finally found the reason for this issue. It seems like that javascript code is only triggered when there’s a table or list in the page. In my case I had just text and a menu. And it seems like that doesn’t make the javascript execute. It also doesn’t seem to work if the page only has a form. Strange, not sure if it’s a bug…

6

Right, that is strange and haven’t heard of that.

You could try it in a view render event then, say the menu?

1 Like
7

That was actually a good idea, thank you! But surprisingly the same thing happens.

I tried a page with a menu and a table, and linked the javascript to the menu. It works as expected. But as soon as I delete the table, the code stops triggering. If then I add a list or a table the code starts to work again.

I reached Knack Support about this, but it seems like it’s out of their scope to look at issues with custom code.

8

Hi,

Did you ever solve this?

I have a couple of pages (including a login and registration) that I need to change the logo, but have tried extensively to remove or change the logo - but as MGR says if you have no forms etc javascript won’t run - and despite spending hours in CSS to try and stop the logo displaying no avail. I know i could add a blank table and then hide it in css, but I know in 6 mnths time i’ll have no idea why there is a blank table on the screen and delete it lol!

1 Like
9

Hi @AndrewUK

I think I can help here as I kinda crossed this issue when writing this below. I think what’s happening here is the wrong event listener is being used. I think @BradStevens probably had the best approach.

In the post the issue was targeting only the log in pages. So I wrote in javascript if the log in section exists then add or removed a class routed the body and scene. I also used the page render event which works only for what you need.

You now can use .loginPage specify your target just to the log in page

Javascript

$(document).on('knack-page-render.any', function() {
   if ($('.kn-login').length) {
     $('#knack-body, .kn-scenes').addClass('loginPage');
   }else{
     $('#knack-body, .kn-scenes').removeClass('loginPage');
   }
});