Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Costumizing nuBuilder bar

Questions related to customising nuBuilder Forte with JavaScript or PHP.
Post Reply
pedromiceli
Posts: 5
Joined: Thu Mar 16, 2023 1:37 pm

Costumizing nuBuilder bar

Unread post by pedromiceli »

Hi guys, im trying to costumize the bar that stays in the top of the site, my objective is put a logo in the middle of the bar like in the example:

I have the image already in the nuBuilder files.
There is a simple way of doing this??????
You do not have the required permissions to view the files attached to this post.
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Costumizing nuBuilder bar

Unread post by kev1n »

Hi,

Here's an example how to add a logo to the Breadcrumb Holder.

Add this JS in Setup -> Header, inside the nuOnLoad() function:

Code: Select all

  // Create a new image element
  var image = $('<img>', {
    src: 'core/graphics/logo.png', // Replace with the actual image URL
    alt: 'Centered Image'
  });

  // Append the image to the nuBreadcrumbHolder div
  $('#nuBreadcrumbHolder').append(image);

  // Function to center the image horizontally
  function centerImageHorizontally() {
    var parentWidth = $('#nuBreadcrumbHolder').width();
    var imageWidth = image.width();
    var marginLeft = (parentWidth - imageWidth) / 2;
    image.css('margin-left', marginLeft + 'px');
  }

  // Call the function initially
  centerImageHorizontally();

  // Call the function again whenever the window is resized
  $(window).resize(function() {
    centerImageHorizontally();
  });
Post Reply