Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Different Logo on Sticky Header when scrolling

Featured Lock Resolved Issue
Hi,

I have simple question:

Where / how can i change the Logo when the Header is sticky (on Scrolling down).
I would like to have a smaller Logo when Scrolling down.
Here is my Link: http://holz.martinlechner.com/


Best regards
Martin

7 Answers

Rifat Wahid Alif - Staff

More than a month ago #Permalink
you have to follow following steps for show different logo in scroll:

1. replace following code in templates/shaper_aspasia/templateDetails.xml aprox 110 no line:


search for


<!-- logo image -->
<field name="logo_image" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE" description="HELIX_LOGO_TYPE_IMAGE_DESC" />
<field name="logo_image_2x" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE_RETINA" description="HELIX_LOGO_TYPE_IMAGE_RETINA_DESC" />
<field name="mobile_logo" type="media" class="child logotype logotype_image" preview="true" label="HELIX_MOBILE_LOGO" description="HELIX_MOBILE_LOGO_DESC" />


replace it by:
<!-- logo image -->
<field name="logo_image" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE" description="HELIX_LOGO_TYPE_IMAGE_DESC" />

<field name="scroll_logo" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_LOGO_SCROLL" description="HELIX_LOGO_TYPE_LOGO_SCROLL_DESC" />

<field name="logo_image_2x" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE_RETINA" description="HELIX_LOGO_TYPE_IMAGE_RETINA_DESC" />

<field name="scroll_logo_2x" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_LOGO_SCROLL_RATINA" description="HELIX_LOGO_TYPE_LOGO_SCROLL_DESC_RATINA" />


2. replace templates/shaper_aspasia/features/logo.php file (i have attached logo.zip).

3. in templates/shaper_aspasia/less/template.less 325 no line search for:


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#sp-header {
.sp-default-logo {
display: none;
}
.sp-retina-logo {
display: block;
}
}
}


replace it by:

//Ratina Logo
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.sticky-wrapper.is-sticky {
#sp-header {
#sp-logo{
.logo{
.sp-scroll-logo, .sp-default-logo, .sp-retina-logo {
z-index: 1;
visibility: hidden;
opacity: 0;
}
.sp-retinascroll-logo{
z-index: 2;
visibility: visible;
opacity: 1;
}
}
}
}
}
#sp-header {
#sp-logo{
.logo{
.sp-scroll-logo, .sp-default-logo, .sp-retinascroll-logo {
z-index: 1;
visibility: hidden;
opacity: 0;
}
.sp-retina-logo{
z-index: 2;
visibility: visible;
opacity: 1;
}
}
}
}
}


you can see live example from here; http://demo.joomshaper.com/2016/empire/

- Thanks

Attachments (1)

  • logo.zip 1.2 KB

Martin Lechner

More than a month ago #Permalink
Hi Rifat,

thanks for your Answer.

But, that doesn't work. Now I see 4 Logos and Text Logo :-(
On Scrolling, also all Logos will be displayed.

Rifat Wahid Alif - Staff

More than a month ago #Permalink
maybe missed css some how, hou can pm me your admin access i will fix it.


- Thanks

claudevips

More than a month ago #Permalink
maybe missed css some how, hou can pm me your admin access i will fix it.

Hello Rifat Wahid Alif,

Could you tell me how you did to help our friend? I'm having the same problem, I followed the above steps and it also did not work with me.

Can you help me?

- Thanks

Webgurus

More than a month ago #Permalink
I would like to replicate the same on my template shaper_hope..But the file template.less is not available. How can i implement the last step kindly

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
Search theme.less file from the following path templates/shaper_hope/less/template.less


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 128
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

292791

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us