Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
That’s because the JS applying the fixed header is applied in a way that assumes the navigation is on top of that image. As the navigation is no longer on top you will have to change the logic of the JS.
The change is simple. This bit:
if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
} else {
headerOffset = $customHeader.innerHeight();
}
Just needs to be replaced with this:
headerOffset = $customHeader.innerHeight();
However you shouldn’t do that directly in the theme’s JS because that would be bad practice and you will lose those changes when the theme updates.
This question is related to the fix; how did you move the menu below the viewport? Where did you make that change, what files etc.?
Thread Starter
szalmo
(@szalmo)
hi thank you for the answer.
i have a child theme and i make the changes in the wordpress customizator.
anyway i don’t have duplicate the global.js (where the string you suggest is, isn’t it?) and, just to try, i edit the one in the mail theme directory and i get no effects on the site. it looks like global.js doesn’t affect the site in any way, but i edit it from the editor in mycPanel control panel and this could be a problem…. any suggestion about it?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Global.js is certainly loading on your site, but rather than try to hack it in let’s do it the proper way. Then if it still doesn’t work we can debug it easier, because we know it should work.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
We need to dequeue the theme’s global.js file first. The theme added this file using this line in the functions.php file:
wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
To dequeue it, in your Child Theme’s functions.php file add this:
wp_dequeue_script('twentyseventeen-global')
https://developer.ww.wp.xz.cn/reference/functions/wp_dequeue_script/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Then create a new ‘global.js’ file inside your Child Theme folder. Edit it and copy all of the code from this PasteBin page and put it inside that global.js file & save: https://pastebin.com/9Gx6Z8dW
You can then load this Child Theme ‘global.js’ file inside your functions.php file by enqueing it like so:
wp_enqueue_script( 'child-twentyseventeen-global', get_stylesheet_directory_uri() . '/global.js' ), array( 'jquery' ), '1.0', true );
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sorry I’ve now linked the Pastebin page in the latest post ^.
Thread Starter
szalmo
(@szalmo)
i copied the global.js in the child theme dir and it works!
this said i don’t understand why i need to dequeue the global.js in the main theme… could you explain?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
JS cannot be overridden like CSS. To make a JS modification you need to remove the original JS and replace it with the updated JS.
Thread Starter
szalmo
(@szalmo)
it’s strange because i have made the changes in the child theme (without dequeue the main) and it works…
moreover: now the navigation act correctly (thanks dude) but i still have an issue with positioning. the div of the contents jump of the same amount of pixel previously occupated by the navigation (when the navigation changes her position from relative to absolute)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
it’s strange because i have made the changes in the child theme (without dequeue the main) and it works…
Can you replicate that again? I’d like to investigate.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
. the div of the contents jump of the same amount of pixel previously occupated by the navigation (when the navigation changes her position from relative to absolute)
I’m not sure I understand. If I control the scrollbar my hand and slowly scroll down in small steps the navigation snaps to the point where it should snap.
Thread Starter
szalmo
(@szalmo)
here is the source of my site: https://www.dropbox.com/s/0zvyoxxbak7cs1g/Screen%20Shot%202017-10-06%20at%2014.24.12.png?dl=0
excuse my english… it’s normal you don’t understand ahah.
the problem is not with navigation (acts correctly) but the div containing the contents… scrolling slowly you can see it takes a jump when the navbar changes from floating to fixed…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
here is the source of my site: https://www.dropbox.com/s/0zvyoxxbak7cs1g/Screen%20Shot%202017-10-06%20at%2014.24.12.png?dl=0
Are you saying you’ve currently not made changes to your Child Theme functions.php to enqueue/ dequeue the scripts?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
it takes a jump when the navbar changes from floating to fixed…
To me this is expected behaviour, but can you tell me what you’re expecting to happen at this point?
Thread Starter
szalmo
(@szalmo)
Are you saying you’ve currently not made changes to your Child Theme functions.php to enqueue/ dequeue the scripts?
yes i don’t edit functions.php – if the file exist in the child theme then the site loads this one…
To me this is expected behaviour, but can you tell me what you’re expecting to happen at this point?
mmmm… no i think the content div has to smoothly scroll indipendently from the navigation bar… i don’t know how to explain…
(thanks for your patience)
