Navbar toggler menu not working after uploading to host

I created a website in BSS and then exported it and worked in Dreamweaver. I tested it on a local test server (WAMP) and when the screen is narrow and the hamburger menu appears for the nav, it works as expected and results in the menu items expanding below.

However, after uploading the site to the host and doing some checks, I’ve just realised that with a narrow screen width, clicking on the hamburger menu doesn’t do anything. I’ve got exactly the same files in my test server directory and in the host directory, but when I inspect the site, the button does not show the aria-expanded attribute or have the ‘collapsed’ class. Also clicking on the menu does not instigate the navbar-collapse to show…

The website is live so I may as well just direct you straight to it! www.highanddryselfstorage.co.uk/

Thanks for any ideas.

Michelle

Without checking your site since I got a very large security warning not to go there, I’m going to guess you didn’t upload the files exactly as they were exported. When you start messing around with the files in apps like Dreamweaver, people tend to think they can move everything around and all will be updated. That is not the case… so…

Check all the files that were exported and make sure they are uploaded in the same structural setup they were exported in. All exported files need to be uploaded.

I’ll double check, but surely it wouldn’t work on my test server either if it was structural thing after exporting? And if it was a missing link to a css or js file or something, the site would have bigger issues than this menu thing… I’ll have a look.

The security warning is just because the site is in process of having the SSL applied.

I understand. I am of course just guessing at the issue. Logically, when something works in the preview window of BSS, and with a Browser preview, but doesn’t work when uploaded, it is usually because something is not uploaded, something is out of structure of the upload (some people don’t like everything being in the Assets folder etc.), or maybe the order is incorrect for the CSS or JS files and the previews were just not picky enough on it to show that.

Well this is definitely not a question about using the Bootstrap Studio Program, so first thing I’d do is delete this post, and repost it in the WebDesign Help category, where it’s more likely to be seen by someone with coding knowledge.

A very quick look in F12 Chrome developer tools reveals that your site is not loading required js resources (see all the the Failed to load resource: the server responded with a status of 404 errors in red?)

If you’re not loading jquery, the drop-down hamburger menu won’t work. Somehow, when you went into Dreamweaver, you broke the paths to your resources.

Hope this gets you started on the path to solving your issue.

1 Like

Doh, I hadn’t uploaded the js files to the server! Thanks for your help

Yaaay easy fixes are great! And yes let’s keep the posts in the correct location from here on out. My bad too, I hadn’t noticed it either.