Solved Templates

Change logo when scroll down (Travus theme)

Asked by Remco 5 years ago Last activity 5 years ago

Hi,

I use the Travus theme. At the top left is the logo with pay-off. I would like the pay-off to disappear when scrolling down. So the full logo in the normal header and another logo in the sticky header. Who can help me? See also the examples.

Accepted answer

Marked as the solution

Rashida Rahman Staff

5 years ago

Hi Remco,

You may try the following code in your custom CSS to get two different logo either:

#sp-header.header-sticky .logo img { opacity: 0; }
#sp-header.header-sticky .logo a { background-image: url(/helixultimate_quickstart_j3_v1.1.1/images/pattran.png); background-repeat: no-repeat; background-size: contain; }

Please use your desired image URL what you want to see in sticky mode while scrolling. You have to keep it within the media.

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Best Regards

10 more replies

Ofi Khan Staff

5 years ago · edited

Hello Remco

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

Best regards

Toufiq Senior Staff

5 years ago

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

Remco Asked this

5 years ago

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

Toufiq Senior Staff

5 years ago

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

Remco Asked this

5 years ago

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?

Toufiq Senior Staff

5 years ago

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

Pavel

5 years ago · edited

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.

Remco Asked this

5 years ago

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

Remco Asked this

5 years ago

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(https://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;
}

Rashida Rahman Staff

5 years ago

Hi Remco,

Really glad that it helped:)

And you are always welcome...