GET 20% OFF on Joomla Templates & Extensions Developer Plan - Use Coupon Code at Checkout dev20

Support Forums

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

Your Time: Our Time:

Shrinking logo when scrolling down

Featured Lock Resolved Task
Hi, there. I have read through the forums and saw a css solution how it is possible to shrink the logo when scrolling down, like on that page:

http://emilnicolaisen.com/

I have tried the css solotions, provided.


#sp-header, #sp-header .logo,
#sp-header .logo img,
.sp-megamenu-parent > li > a{
-webkit-transition: 200ms;
transition: 200ms;
}

.is-sticky #sp-header {
height: 70px;
}
.is-sticky #sp-header .logo {
height: 70px;
}
.is-sticky #sp-header .logo img {
width: 200px;
}
.is-sticky .sp-megamenu-parent > li > a {
line-height: 70px;
}


But thats not working on my site, What am I doing wrong?
Here the link to my page:

To Page

Martin

6 Answers

Arun Sasi

More than a month ago #Permalink
Hi,

I have updated the CSS. Please check now.

Thanks
Arun

Arun Sasi

More than a month ago #Permalink
Hi,
instead of .is-sticky use class name .menu-fixed-out


#sp-header, #sp-header .logo,
#sp-header .logo img,
.sp-megamenu-parent > li > a{
-webkit-transition: 200ms;
transition: 200ms;
}

.menu-fixed-out #sp-header {
height: 70px;
}
.menu-fixed-out #sp-header .logo {
height: 70px;
}
.menu-fixed-out #sp-header .logo img {
width: 200px;
}
.menu-fixed-out .sp-megamenu-parent > li > a {
line-height: 70px;
}


You need to adjust the value based on your logo size.


Thanks
Aruun

kweb

More than a month ago #Permalink
Hi,
instead of .is-sticky use class name .menu-fixed-out


#sp-header, #sp-header .logo,
#sp-header .logo img,
.sp-megamenu-parent > li > a{
-webkit-transition: 200ms;
transition: 200ms;
}

.menu-fixed-out #sp-header {
height: 70px;
}
.menu-fixed-out #sp-header .logo {
height: 70px;
}
.menu-fixed-out #sp-header .logo img {
width: 200px;
}
.menu-fixed-out .sp-megamenu-parent > li > a {
line-height: 70px;
}


You need to adjust the value based on your logo size.


Thanks
Aruun


Hi and thanks for your answer. I have implemented the code to my external css file styles_amp.css - but it has no effect to the logo - just to the mainmenu items.


#sp-header, #sp-header .logo,
#sp-header .logo img,
.sp-megamenu-parent > li > a{
-webkit-transition: 200ms;
transition: 200ms;
}

.menu-fixed-out #sp-header {
height: 80px !important;
}
.menu-fixed-out #sp-header .logo {
height: 80px !important;
}
.menu-fixed-out #sp-header .logo img {
width: 80px !important;
}
.menu-fixed-out .sp-megamenu-parent > li > a {
line-height: 88px;
}

Arun Sasi

More than a month ago #Permalink
Hi,

Could you please PM me your website admin details.

Thanks
Arun

kweb

More than a month ago #Permalink
Perfekt, thanks for your help!


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 175
Sifat

Sifat

Total Accepted Answers: 94
Toufiq

Toufiq

Total Accepted Answers: 77
Pavel

Pavel

Total Accepted Answers: 4
SS

SuperSys IT Services

Total Accepted Answers: 2

100+

Templates

200,000+

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