Minimize top logo on page scroll

ramsey1971

Good morning, I am pretty sure this was working before but may have been lost in updates.
Can you tell me how we can minimize the top logo on a sticky menu when page is scrolled please?
Many thanks
Mark

saguaros

Hi @ramsey1971

You can add the following custom CSS:

.not-at-top .logo-img {
	max-width: 200px;
}

.not-at-top .navbar-brand {
	background: transparent;
}

I have updated it for you in the file /templates/ja_vitality/local/css/custom.css. Please check it again 🙂

ramsey1971

Awesome, thank you. Sorry to be a pain but is there I way I can render either an alternative logo on scroll down or change the background on the logo portion? It may be easier to have a non transparent logo in there though?

Thanks again,

Mark

saguaros

Hi @ramsey1971

To change the background of the logo when scrolling, you can modify the CSS snippet above

.not-at-top .navbar-brand {
    background: transparent;
}

to the background color you prefer.
Changing the logo when scrolling will require editing multiple files.

Hope this helps you!

ramsey1971

super, many thanks

saguaros

You're welcome 😉