Sticky menu with different logo

Hi guys, I’d like to change the logo in the sticky menu that appear when I scroll down the page. in the homepage I a big vertical logo, I’d like to change it in the scroll bar and put an horizontal logo. is it possible? tx a lot

this is the test page where I uploaded the website.

You could do something like this…

No doubt there are other ways.

I didn0t understand. a video tutorial would be perfect :slight_smile:

Hi Davide,

It’s a bit different method I think, but you might find this tutorial helpful. (if you haven’t watched it already)


Hey @davideakadudu

Here is a short video on how to use that code. Hope it helps. Let me know if you need more help with it.

EDIT: Adding the code here for simplicity

var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = ''
var scrollDistance = '30'

window.addEventListener('scroll', function() {
       if ($(this).scrollTop() < scrollDistance) { 
          $('.navbar-brand img').attr('src',logoOne);
        if ($(this).scrollTop() > scrollDistance) { 
           $('.navbar-brand img').attr('src',logoTwo);

Hey @Malachiman

your help in this forum here is invaluable indeed… I really mean it.

Pete, could you please share the same script code snippet, but where both logos are stored locally among the project assets (not under some url)?
I mean basically the part, where you define the variables for the images to grab.

I might have an idea, but my javascript knowledge is quite limited (was too long ago :slightly_smiling_face:)…

Thanks a lot!

hey this is great video !

I wanted to do something like this a while back - will be great to refer back to this. I originally wanted to have this so the text was a different colour too, but the logo change is great.

Hey @Maxim,

Unfortunately at present, if the image is not being used in Blocs it doesn’t export it. Sometimes what I will do is create a temporary page with the image(s) and I will be able to link to it eg… “img/myimage.jpg”.

Or I just upload the image to my server and link to it.

The other option is to make a Custom Bric for this, which I can probably do at some stage. That way its all just set in the side panel.

1 Like

You don’t need Javascript for that, you can do with it purely with CSS.

thank you very much @Malachiman, it works great!
you can see the result on the test page
what do you think about this website?
tx a lot

@Malachiman maybe it’s a stupid question, but I’m new so I’m asking you anyway. when I view this website I’m workin on in a large window everything is ok, but if I narrow the browser or if I view the site from a smartphone, the vase on the right disappears and I can’t see it anymore. how do i pin the background image on the right so that it is always visible?


Thank you for explanations, I saw it in your code and just wondered, because the first image asset is built-in and the second is an url… :wink:

So, basically If I place those images on a dedicated (hidden) page, e.g.



the code would be something as follows? Please correct me if I’m wrong.



Yes you can do that. The code you put is a little wrong.

var logoTwo = '/img/logo1.jpg'
var logoTwo = '/img/logo2.jpg'

I saw your other thread, I will post in there. But its late here, I’m off to bed. :sleeping:

ok thank you very much. I wait for it


For those who might need it: here is a small follow-up about my question of logo change on scroll here. All kudos go to @Malachiman. :point_left: It is his solution and his script!

I just want to add how to create same result, where both logos are local assets of your choice and not url (it was basically my question to @Malachiman above).

So here is how I did it:

  1. Create a hidden Page in Blocs and place the logo images there:

In my example:

First image is named: Logo1.png
Second image is named: Logo2.png

Check the Screenshot below.

  1. Then adjust the above JavaScript (as @Malachiman suggests) in the project page or project footer (project footer in my case) as follows:

var logoOne = ‘/img/Logo1.png’
var logoTwo = ‘/img/Logo2.png’
var scrollDistance = ‘30’

window.addEventListener(‘scroll’, function() {
if ((<span style="color: #008000; font-weight: bold">this</span>).scrollTop() <span style="color: #666666">&lt;</span> scrollDistance) { (’.navbar-brand img’).attr(‘src’,logoOne);
if ((<span style="color: #008000; font-weight: bold">this</span>).scrollTop() <span style="color: #666666">&gt;</span> scrollDistance) { (’.navbar-brand img’).attr(‘src’,logoTwo);


Can I ask you about this type of sticky? It vanishes as you scroll towards the top of the page and then gently returns as you scroll down:

Thank you!

Hello @sim, if @Malachiman allow me you can check this website, and the solution with a little of changes in Blocs works very well:

1º Add a “Navigation menu” bloc.

2º In the navigation menu bloc change the ID to site-header

3º In page settings, add the following code:

#site-header {
	position: fixed;
	height: 60px;
	top: 0;
	width: 100%;
	z-index: 100;
	transition: all .3s ease;

#site-header.hide {
	top: -60px;

document.addEventListener("DOMContentLoaded", function() {

  var doc = document.documentElement;
  var w = window;

  var prevScroll = w.scrollY || doc.scrollTop;
  var curScroll;
  var direction = 0;
  var prevDirection = 0;

  var header = document.getElementById('site-header');

  var checkScroll = function() {

    ** Find the direction of scroll
    ** 0 - initial, 1 - up, 2 - down

    curScroll = w.scrollY || doc.scrollTop;
    if (curScroll > prevScroll) { 
      //scrolled up
      direction = 2;
    else if (curScroll < prevScroll) { 
      //scrolled down
      direction = 1;

    if (direction !== prevDirection) {
      toggleHeader(direction, curScroll);
    prevScroll = curScroll;

  var toggleHeader = function(direction, curScroll) {
    if (direction === 2 && curScroll > 60) { 
      //replace 60 with the height of your header in px

      prevDirection = direction;
    else if (direction === 1) {
      prevDirection = direction;
  window.addEventListener('scroll', checkScroll);


Hope it helps you…


Thank you very much. I’ll give it a go. I can see this being a very popular bit of code.