Support Forums

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

Your Time: Our Time:

header shrink on scroll

Featured Lock Resolved
Hi, with css
#sp-header, #sp-header .logo, 
#sp-header .logo img,
.sp-megamenu-parent > li > a{
-webkit-transition: 300ms;
transition: 300ms;
}

.is-sticky #sp-header {
height: 50px;
}
.is-sticky #sp-header .logo {
height: 50px;
}
.is-sticky #sp-header .logo img {
width: 100px;
}
.is-sticky .sp-megamenu-parent > li > a {
line-height: 50px;
}
try to make header shrink on scroll but it is not working

Using Helix3 v1.7
Can't figured why, please help
Thx

7 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
sorry for delay.
Please try this ::
header.menu-fixed,
header.menu-fixed .logo {height: 50px; !important; }
header.menu-fixed .sp-megamenu-parent > li > a {line-height: 50px; }


It should reduce header height after scroll down.

Attachments (1)

  • header-smaller.jpg
    header-smaller.jpg 77.3 KB

komir

More than a month ago #Permalink
Paul Frankowski wrote:

Hi,
sorry for delay.
Please try this ::
header.menu-fixed,
header.menu-fixed .logo {height: 50px; !important; }
header.menu-fixed .sp-megamenu-parent > li > a {line-height: 50px; }


It should reduce header height after scroll down.

It is working, only you have one ; before !important .
Correct is
header.menu-fixed,
header.menu-fixed .logo {height: 50px !important; }
header.menu-fixed .sp-megamenu-parent > li > a {line-height: 50px; }

komir

More than a month ago #Permalink
Also how to make logo to shrink with transition, like menu, and to center not to left?
Thx

Paul Frankowski - Staff

More than a month ago #Permalink
Probably using CSS.
But if I remember cousine template well, it has 2 menus and logo at the center.

---simple logo size reduce, after scroll down, no animation---

header.menu-fixed #sp-logo img {max-height:65px; }

Kirti

More than a month ago #Permalink
Hi Paul,

Will this work on Helix Ultimate and Restora? This is important particularly where the logo's height is more than its width.

Regards


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: 127
Sifat

Sifat

Total Accepted Answers: 83
Toufiq

Toufiq

Total Accepted Answers: 71
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5

114

Templates

293293

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