Why jquery menu collapse on all pages except front page
Doing

&lt;script src=&quot;sites/all/themes/custom/mytheme/js/main.js&quot;&gt;&lt;/script&gt;

is bad Drupal practice. As per the docs you should be doing
my_theme.libraries.yml
menu-collapse:
  version: 1.x
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.once

page--node--2.html.twig
page--node--3.html.twig
page--node--6.html.twig
page.html.twig
{{ attach_library('theme_name/menu-collapse') }}

inside the template file(s).
Note: If this functionality is meant to be for every single page, rather then having to always add this to every variation of page.html.twig, add this in html.html.twig instead.

If after doing the above, the issue still persists

Why would the front page not operate like the other pages in accessing
the JavaScript and jQuery?

Possibly due to jQuery being loaded twice.
Go to /admin/config/development/performance and uncheck Aggregate JavaScript files (remember to turn back on after your're finished debugging)
Then on your front page, right mouse click, and select inspect
Go to network, and select JS, then refresh the page with the inspector open. You'll be able to see all the JS files that are loaded.


If there are no jQuery duplicates, in the inspector go to the &quot;Console tab&quot; and see if there is a JS error.