We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

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

Your Time: Our Time:

Sticky Menu change effect? Helix Ultimate

Featured Lock Resolved Task
http://m-aia.de.w01a02b7.kasserver.com

When I scroll down and the menu becomes sticky the effect is not very nice. How can I make that smoother?

Especially when you scroll slowly while reading the banner jumps up. I would like the menu to go away with the page and then fade in down smoothly... :o :)

THX!

5 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
You have to insert this CSS in your custom CSS.


#sp-header.header-sticky {
position: unset;
z-index: unset;
}


If you have SP page builder then you follow this
http://prntscr.com/q8w03l
If you do not have SP page builder then you can follow this
https://files.fm/u/shtmdpme
You can use any two of these
Thanks

Pavel

More than a month ago #Permalink
Hi, Joshua.
The first thing you should always do when you are working on site - turn off JCH Optimize, disable caching, clear the cache of joomla and cache of JCH Optimize. Only after these steps, you can start to work.

In order to achieve what you want to do, you have to remove everything that you done with a header before and use a very different approach. This will require significant css coding.

Step 1.
Return header to 100% width and make the background transparent, remove unnecessary code.
http://dl3.joxi.net/drive/2019/12/12/0008/0401/545169/69/4db27ec898.jpg
Remove this code. It is also no longer required.
http://dl4.joxi.net/drive/2019/12/12/0008/0401/545169/69/2c1933ed0f.jpg
Set the background color for the menu.
http://dl3.joxi.net/drive/2019/12/12/0008/0401/545169/69/9c8fbf7f7d.jpg
Reduce the width of the menu, if necessary, using padding its container.
http://dl3.joxi.net/drive/2019/12/12/0008/0401/545169/69/e7d29452d4.jpg
In general, at this stage, bring the menu to the appearance that you want.

Step 2.
Set the header position absolute.
http://dl4.joxi.net/drive/2019/12/12/0008/0401/545169/69/a2a0721950.jpg
Compensate the height of the header, using the padding bottom in the logo section.
http://dl4.joxi.net/drive/2019/12/12/0008/0401/545169/69/bc557a992e.jpg
Go back to the header settings and pick up position from the top, under your design.
http://dl4.joxi.net/drive/2019/12/12/0008/0401/545169/69/b48c48e340.jpg
Set for the sticky state top 0.
http://dl3.joxi.net/drive/2019/12/12/0008/0401/545169/69/53c9c00a81.jpg
At this stage, you'll get a sticky menu that without jumping sticks to the top of the browser.

Step 3.
If you want to get the menu to go away with the page and then fade in down smoothly, you need to add a small animation code for sticky state.
http://dl4.joxi.net/drive/2019/12/12/0008/0401/545169/69/4cc7b5cc61.jpg

Joshua Miccoli

More than a month ago #Permalink
Hi,
You have to insert this CSS in your custom CSS.


#sp-header.header-sticky {
position: unset;
z-index: unset;
}


If you have SP page builder then you follow this
http://prntscr.com/q8w03l
If you do not have SP page builder then you can follow this
https://files.fm/u/shtmdpme
You can use any two of these
Thanks


:( just to turn it off? I want it smooth, not off.

Joshua Miccoli

More than a month ago #Permalink
@pavel Thank you. Tried, but too complicated for me. Seems I have to live with that buggy Menu from Joomshaper...
Really a thing, that I don't understand. Thousand possibilities, but not the ones you could bring in design with.

Pavel

More than a month ago #Permalink
I think it's not possible to put a thousand possibilities in one product. Otherwise, this product will become so heavy that it can not work normally. I've seen a lot of different templates and can state the fact that Joomshaper products, one of the few that has a nice, clear code, and the most convenient features to use custom css coding.

If you want complete freedom to do as you want - learn html and css. It is not long and is not difficult.


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

126

Templates

333648

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