-
Posts
-
Hello,
I am designing a new website. It is still a draft. I have to reproduce the historical style of the old website, with a big header of 165px of height (with a background image) in all pages except the home where there should be a full width slider and the header should appear after scrolling.
I selected in Enfold settings Sticky Header and Shrinking Header.
Is it possible to decide after how many pixels of scrolling the header should appear?
At the moment there is a strange behaviour. Ideally, the header should appear after the full width image has disappeared.
Thank you
MauroHey profumopuntoit,
Thank you for the inquiry.
There is no option for it by default, unfortunately. You might have to modify the enfold/js/avia-snippet-sticky-header.js file directly around line 128. This checks if the scroll position is more than 50px.
if( st > 50 )You might be able to do what you are after adjusting the condition, so that it checks if the scroll position is more than the window height. Something like this.
if( st > $(window).height() )Best regards,
IsmaelThank you Ismael,
so if I copy enfold/js/avia-snippet-sticky-header.js to enfold/-child/javia-snippet-sticky-header.js and modify this file it should work?
Or this is valid only in case of php files?
MauroHi,
Thank you for the update.
If you want to override it in your child theme, you will have to deregister the script file first and register it back using its new path in the child theme directory. The handle of the script is “avia-sticky-header”.
// https://developer.wordpress.org/reference/functions/wp_deregister_script/
A few examples can be found in the following threads.
// https://kriesi.at/support/topic/is-it-possible-to-whitelist-a-custom-cookie/#post-1310899
// https://kriesi.at/support/topic/google-map-marker-size-increase/#post-1308434
// https://kriesi.at/support/topic/tabs-select-on-hover/#post-1307497Best regards,
IsmaelThank you Ismael,
that is ok with this snippetfunction jmb_avia_sticky_header()
{
wp_dequeue_script(‘avia-sticky-header’);
wp_deregister_script(‘avia-sticky-header’);wp_register_script(‘avia-sticky-header’, ‘/wp-content/themes/enfold-child/js/avia-snippet-sticky-header.js’);
}
add_action(‘wp_enqueue_scripts’, ‘jmb_avia_sticky_header’);but there is still an issue with the logo that has a strange behaviour
Please see the video in private content
Thank you
MauroHi,
The white space is the default background of the header. You might be able to get rid of it by adding this css code.
.header_color .header_bg { opacity: 1; background-color: #1e5825 !important; }Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. The issue does not occur when scrolling normally using a trackpad or the middle mouse. The header transitions smoothly downward and display the header fully. We can only reproduce it when we intentionally scroll at the very bottom of the slider first and gradually move downwards as you did in the video.
Best regards,
IsmaelThank you Ismael,
like this the color is more or less similar to the header background, but there is still a shift of the header of 15/20px that disappear as soon as you scroll a little more. I would like to avoid that.
Background image height is 189px and I have set the same height in Enfold header setting
In this way, also the background of the megamenu has become green.
Please see video and screenshot
Thank you
mauroHi,
Thank you for following up.
We updated the css code above and remove the other selectors, so that it will only affect the header background. We also set the opacity from 0.95 to 1. Unfortunately, we cannot figure out why the header shifts a bit on scroll. By default, the header is not intended to work this way, so you might have to revert the modifications and instead use the available settings.
Best regards,
Ismael
- You must be logged in to reply to this topic.