-
Posts
-
Hi!
I think this will be an easy <?> one… for some reason, my developer added a custom javascript plugin when we moved to Enfold a few years ago, and added some js to create a second logo in the header (I think). The code is in private content below. Is there somewhere else (in my child theme?) I can put this code so I don’t need this plugin? Seems like the header on my site loads after everything else, so it’s blank and then appears… I’m wondering if that might solve that issue, as well as get rid of one plugin.
Thanks,
RobHey Rob,
Please refer to this post – https://kriesi.at/documentation/enfold/add-custom-js/
Best regards,
YigitThanks… I moved the code to functions.php but it crashed staging site, so guess this one is beyond my capability. I thought it would be an easy cut paste to a file on the child theme, but maybe that’s why he used a plugin if it’s not that simple?
Thanks,
RobHi Rob,
Please add following code to bottom of Functions.php file of your child theme
//------------------------------- // Custom script in footer //------------------------------- function custom_script_name(){ ?> <script> jQuery(document).ready(function($) { $('#header_main > div.container.av-logo-container > div').delay(100).show(0); $(window).on('load resize', function(){ var width = $(window).width(), height = $(window).height(); if ((width <= 768)) { $('.logo img').css('height','71px'); } if ((width <= 425)){ $('#header_main > div.container.av-logo-container').css('line-height','inherit'); $('.html_header_top.html_header_sticky #top #wrap_all #main').css({ 'padding-top': '180px'}); } else {} if ((width <= 1025)){ $('.html_header_top.html_header_sticky #top #wrap_all #main').css({ 'padding-top': '225px'}); $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('#header_main > div.container.av-logo-container > div > strong:nth-child(3)').css({ 'display': 'none' }); $('#header_main > div.container.av-logo-container > div > strong:nth-child(1)').css({ 'float': 'left' }); $('.html_header_top.html_header_topbar_active.html_header_sticky #top #main').css({ 'padding-top': '145px'}); $('#header_main > div.container.av-logo-container > div > strong:nth-child(1) > a > img').css({ 'padding-top': '5px'}); $('.html_header_top.html_header_sticky #top #wrap_all #main').css({ 'padding-top': '145px'}); } }); } else {} if ((width <= 768)){ $('.html_header_top.html_header_sticky #top #wrap_all #main').css({ 'padding-top': '200px'}); $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.html_header_top.html_header_topbar_active.html_header_sticky #top #main').css({ 'padding-top': '145px'}); $('.html_header_top.html_header_sticky #top #wrap_all #main').css({ 'padding-top': '125px'}); $('#header_main').css({ 'height': '120px'}); } }); } else {} if ((width <= 625)){ $('.responsive #top #main').css({ 'padding-top': '200px'}); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.html_header_top.html_header_topbar_active.html_header_sticky #top #main').css({ 'padding-top': '125px'}); $('#main').css({ 'padding-top': '125px'}); $('#header_main').css({ 'height': '120px'}); } }); } else {} }) }); </script> <?php } add_action('wp_footer', 'custom_script_name');Best regards,
YigitThanks so much Yigit! I never should have called this “easy” as I jinxed it.
The code works for most of the pages, but for some reason the page below shows up on desktop & mobile with no header unless I click reload a couple times. Strange!
Best.
Robhope you will have no performance troubles –
get familiar with debouncing ( resize case) and throttling (scroll case) functions.
but both on the same time – i would not know how to get this.you see how debounce and throttle work on this page https://css-tricks.com/debouncing-throttling-explained-examples/
The two logo customization has been a challenge since day one. I really wish Enfold would add support for a second logo or linked image in the header. I think this customization slows down my header load and therefore the whole site….
hm – two logos is not so complicated i thought.
see here with a customization of shrinking . – logo in the middle goes with scroll to the left position : https://webers-testseite.de/two-logo-header/
Or here https://webers-testseite.de/cynthia/mille-deco/
because of the other logo experiments on that page it is hard to optimize it for all pages the same time :lol: https://webers-testseite.de/cynthia/logo-move/WOW 007, that looks amazing… I am working on a different project now but will get to this in a day or two. It appears that the header on https://webers-testseite.de/cynthia/mille-deco/ doesn’t work on mobile, and isn’t sticky?
Thanks!!!
Rob
that is normal enfold behavior that it is not sticky. but that will be only pure css .
What do you mean by doesn’t work on mobile
the logos are on that case under each other . I think that looks better than two very sall logos besides each other.
by the way Yigit : is there a debounce function implemented on Enfold ?
on a lot of source codes i read something like this:
win.on( 'debouncedresize', function(){ el_height = $(elements).attr('style',"").filter(':first').height(); set_height(); } );but i can not find where this is implemented
Hi,
Yes, there is.
// https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
It’s in the js > shortcodes.js file.
Best regards,
IsmaelThanks – and if i want to debounce a function it is used in Enfold like:
win.on( 'debouncedresize', function(){ …
without parameter or can i change the trashold on this function by:win.on( 'debouncedresize', function(){ … }, 50);
- You must be logged in to reply to this topic.