Fancy-Heading Height (padding-bottom) in ChildTheme

[Pikay]

Hi.

I need an edit of the file /dante/js/functions.js for my ChildTheme.

Line 208 of /dante/js/functions.js:
ORIGINAL: var paddingBottom = (120 – scrollTop / 5 > 0) ? 120 – scrollTop / 5 : 0,
NEEDED: var paddingBottom = (350 – scrollTop / 5 > 0) ? 350 – scrollTop / 5 : 0,

How can i change this line for my ChildTheme, so that it will work also after the next updates of the parent theme?

Copy /dante/js/functions.js into /dante-child/js/functions.js and edit does not work …

Thanks a lot! 🙂

[Mohammad – SUPPORT]

Hi,
If you make any changes through at js file through child theme then any new feature of theme will not work because you have js file at child theme that will ignore all new update/feature of theme.
Thanks
Mohammad

[Pikay]

Hi.

Well, this answer isn’t really helpfull, because the theme doesn’t work properly 🙁

At the moment i can edit the padding of the fancy-headig via custom css:
.page-heading.fancy-heading {
padding-top:200px;
padding-bottom:200px;
}

BUT, and this is the part i do not understand, via /dante/js/functions.js the padding-bottom is hardcoded in the html-file:
–> <div class=”page-heading fancy-heading col-sm-12 clearfix asset-bg none light-style fancy-image ” style=”display: block; opacity: 1; padding-bottom: 120px; background-image …

Everything looks good, until i scroll the header over, then the hardcoded 120px padding-bottom affects the fancy-header

Any solution? thx in advance

[Mohammad – SUPPORT]

Hi,
Do you want to decrease this padding-bottom ?
Thanks
Mohammad

[Pikay]

Hi Mohammad.

Yes. I want to decrease the padding-bottom so that the heading text is at the bottom of the fancy-header. My CSS settings are:

.page-heading.fancy-heading {
padding-top:338px;
padding-bottom:20px;
}

But this only works until i scroll over the fancy-header an then the padding-bottom is 120px …

[Mohammad – SUPPORT]

Hi,
Dont Worry 🙂 . Just add !important rule in your css and use.

.page-heading.fancy-heading {
padding-top:338px !important;
padding-bottom:20px !important;
}

Thanks
Mohammad

[Pikay]

padding-bottom:20px!important works fine for now. padding-top!important is not necessary in this case and affects the mobile output

thanks! 🙂

[Mohammad – SUPPORT]

Hi,
Please remove that code and use this code:-

@media only screen and (min-width: 1025px) {
.page-heading.fancy-heading {
padding-top:338px !important;
padding-bottom:20px !important;
}
}

Thanks
Mohammad

[Pikay]

Big Thanks! 🙂

[Mohammad – SUPPORT]

Hi,
You most welcome and glad 🙂 to help you.
Thanks
Mohammad