Hello Remco

Your screenshot and site view does not match. Please follow the CSS given in the next comment.

Best regards

Hi there,

Thanks for contacting us. Please add this css code inside the custom.css file.

#sp-header.header-sticky .logo img {
    height: 50px;
    width: 290px;
}

-Thanks

Hi Ofi Khan and Toufiq,

I've edited the screenshots to show you how I want it. It is true that they do not correspond to what the website looks like now, because otherwise my question would not be necessary because it is already the way I want it.

So in concrete terms, how can I make my website look like the previously sent screenshots? In any case, I need two different logos. The full logo in the normal header and the logo without pay-off in the sticky header when you scroll down. But how can i do this? That was my question.

Regards, Remco

Sorry to say that, this is not possible that you want to do exactly. Thanks

Is there really no way to do this at all? Is it not possible to show a different logo in the sticky header by a custom CSS adjustment?

Sorry to say that, this feature does not exist. Thanks

Hi Remco. It is very easy to do by using Joomla Custom module and a small CSS coding.

The starting point for this:

You can publish Custom module containing another logo in the Logo position. Then, using CSS you need to hide this module in the state before scrolling and display in the state after scrolling. And hide main Logo in the state after scrolling.

Parent classes that you can use:

/*Before scroll*/
#sp-header .some_kind_of_child_class {
    /* your code goes here */
}
/*After scroll*/
#sp-header.header-sticky .some_kind_of_child_class {
    /* your code goes here */
}

With this you can change anything inside Header before and after scrolling.

Or you can use JavaScript to change the value in the src attribute of .logo-image after scrolling.

Thanks Pavel,

Since I am not a programmer, and only have basic html and css knowledge .. Could you maybe and want to help me with the css and the javascript?

I would really appreciate that!

Regards, Remco

Thank you, that helps me! Solved with the following CSS:

/*Before scroll*/
#sp-header.header-sticky .logo img {
    opacity: 0;
}

/*After scroll*/
#sp-header.header-sticky .logo a {
    background-image: url(www.moventa.nl/site/images/logo-moventa-travel.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 0px;
    height: 60px !important;
}

#sp-header.header-sticky .logo img {
  height: 60px !important;
}

Hi Remco,

Really glad that it helped:)

And you are always welcome...