Change URL of Header Logo - Javascript

Ask the Community Get Answers
1

I want to change the link that is in the header area.

I don't see a place to change that in the app settings, so it seems I will need to use javascript to get this done.

Anyone have anything that will change the URL of the header logo?

 

Thanks

Jason

2

Works perfect. Thanks!

3

Hello Jason,

 

Try below code

$(document).on('knack-scene-render.any', function (event, view) {
var newUrl = "https://google.com";
$("#knack-logo a").attr("href", newUrl);
});

 

Thanks,

Sunny Singla

ssingla1985@gmail.com

+919855089359

4

I would like to provide an update to this thread. For myself, I needed to make a slight change to Sunny’s suggestion for this code to work.

I needed to change “#knack-logo a” to “.knHeader__title-logo-wrapper” for this to function properly.

$(document).on(‘knack-scene-render.any’, function (event, view) {
var newUrl = “#example_page”;
$(“.knHeader__title-logo-wrapper”).attr(“href”, newUrl);
});

5

This work great thanks Sunny.
How would I alter the code to remove the link altogether?

6

Hello Craig,

You need to find all links with there CSS selector or ID and replace URL

Regards,
Sunny Singla

7

Hi Craig

If you copy this code to your builder it should work.

Knack.router.on('route:viewScene', function () {
        $('#knack-logo a').removeAttr('href');
});

Craig

8

Thanks Craig,
Works great.

9

adding this to the pile. (i’m not a coder but i asked the internet a favor and it whispered this back to me in exchange for the next generation’s ability to problem solve :hugs: ) My issue was that - occasionally/somehow - the link in the header logo was attempting to take the logged in user to a page that they don’t have access to because of their user role(s). I wanted to define the link based on the currently logged in user’s role(s). My app has 3 “admin” roles. (those roles are objects 26, 80, and 96 below.) All other roles are “user” roles.

(function () {
  function userHasAdminRole() {
    var user = Knack.getUserAttributes();
    if (!user || !user.roles || !user.roles.length) return false;

    var adminRoleKeys = ["object_26", "object_80", "object_96"];

    return user.roles.some(function (roleKey) {
      return adminRoleKeys.includes(String(roleKey));
    });
  }

  function setLogoHref() {
    var target = userHasAdminRole()
      ? “https://google.com/adminurl”
      : “https://google.com/userurl”;

    var $logo = $(".knHeader__title-logo-wrapper, #knack-logo a");

    if ($logo.length) {
      $logo.attr("href", target);
    }
  }

  $(document).on("knack-scene-render.any", function () {
    setLogoHref();
  });

  if (Knack.router && typeof Knack.router.on === "function") {
    Knack.router.on("route:viewScene", function () {
      setTimeout(setLogoHref, 0);
    });
  }
})();

No idea if it’s any good, but seems to work. I used adminRole but the var and function names can be changed to match your intent. i think you just to define the two urls, and define the user role objects that you want to send to the admin url. when the logo is clicked, if the logged in user’s role(s) match any of the defined objects, they’ll be sent to the top/admin url, and i think all others will go to the bottom/user url. feedback welcome.

10

The default behavior for the Knack logo usually forces a redirect to the parent app page, but you can override this with a small script in the API & Code section. You need to target the logo selector specifically to prevent the default action.

Try to add this to your Javascript pane:

$($(document).on('knack-view-render.any', function(event, view, data) {
  var logoLink = $(".kn-header__logo a");
  if (logoLink.length) {
    logoLink.attr("href", "https://your-custom-url.com");
    logoLink.attr("target", "_blank"); // Optional: opens in a new tab
  }
}));

This approach waits for the view to render so the element is actually present in the DOM before the script tries to modify the attribute. It’s a cleaner way to handle it than a simple timeout, which can be hit or miss depending on the connection speed. If the logo is part of a specific scene, you can replace ‘any’ with the scene key to limit where the script runs.