CSS works on one site but not on another

Report · Aug 31, 2021

Menu Conundrum:

I have used this responsive drop-menu before and it has always worked in the way that I intended it should.

When a visitor first opens the site on a small device, the menu-list should be hidden and only the black “menu” bar should be visible.

A click on the black “Menu: bar should cause the List of Links to drop into view.

When the visitor clicks on a Link in the list, they are taken to the linked new page.

Their initial view of the newly-visited second page should show only the Black Bar (the list of Links should be hidden.

In the Weaver website, I have this working as I intended.

But in the Taumel site that I am currently building, this is not working:

https://taumel.shelbourne-america.net

In the Taumel site, the list remains extended and does not retract back into the Black Bar as it should.

Both sites use the same Script (which does not use a Bootstrap button to close the Menu).

The Menu simply always opens in the retracted “Closed” condition when the User of a small device clicks a Link from a previous page or arrives on the Site for the first time.

I have re-used parts of my original coding in the new site but I simply cannot see, for the life of me, what is missing or different in coding in the new site so that it is causing the problem.

I would be extremely grateful if anyone has time to take a look and has any ideas for fixing the Taumel menu.

I will attach the two CSS and the the HTML for a Taumel pageCSS

Report · Aug 31, 2021

[Irrelevant code removed by moderator.]

Report · Aug 31, 2021

[Irrelevant code removed by moderator.]

Report · Aug 31, 2021

The Taumel HTML and CSS files:

Report · Aug 31, 2021

[Irrelevant code removed by moderator.]

Report · Aug 31, 2021

The link to the Weaver Site is:

https://weaverconstruction.co

Report · Aug 31, 2021

It's more than likely because you have not included the associated menu javascript file:

Add the link, like you have on the weaver contruction website at the foot of the page and make sure the folder and javascript file are in your site folder, and see if that improves the problem.

EDITED:

After further inspection of your code I see you have added the link to the menu javascript file BUT it wont work where you have added it, just before your <header> tag, why - because the script will load prior to the html code, so it has no effect.

You have 2 options place the link to the javascript file at the foot of your page or leave the link where it is and add 'defer' to the script tag.

Report · Aug 31, 2021

A link to the non-working page is all that's required. You don't need to post all this superfluous code.

That said, this JS file in your non-working page is 404 not found on server. Based on the path below, it should be located in the same pages/ folder as your HTML files.

<script type="text/javascript" src="index-Test2.html"></script>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 31, 2021

<!doctype html5>

The above doc type is invalid.

Please review document types:

https://www.w3schools.com/tags/tag_doctype.asp

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 31, 2021

Nancy:

Thank you so much for your prompt response.

I am about to incorporate your suggestions and will let you know how it works out.

Sorry about flooding the site with code but I had mistakenly thought that you would need to see it.

Report · Aug 31, 2021

Nancy:
Thank you so much for your prompt response.
I am about to incorporate your suggestions and will let you know how it works out.
Sorry about flooding the site with code but I had mistakenly thought that you would need to see it.

By @AnnShelbourne

Hummmm.......maybe you should include the most important suggestion, but that's your choice.

Report · Aug 31, 2021

Good idea, Osgood but, until I had corrected all of the affected pages (and tested them to see if they were then actually working as intended) I was not yet in a position to mark any response as correct?!

I previously thanked Nancy for her very prompt help (which has now proved to have been totally correct) and that is why I have returned here to note the fact.

My error arose because I had started the Taumel site by borrowing one of my pages from the Weaver site; deleting most of the earlier contents; and pasting new content above and below what was left. The Script got stranded at the beginning instead of the end of the page.

Then I compounded my problem by duplicating that first page for the subsequent ones!

My "httml5" mistake didn't prevent the pages from loading (I have corrected it anyway) but the misplaced Script was what was killing the menu function.

Report · Sep 01, 2021

The other errors were incidental to what the actual error was concerning the navigation and would have had no bearing on the problem although you should obviously take note of the advice given and correct those errors as well of course.

No problem, l was just a bit miffed as to why my suggestion seemed to be overlooked in favour of other suggestions which werent directly related to the issue in concerned. Of course it could have been you thought all 3 responses had been posted by Nancy, that happens too and happens frequently and quite easily.

Not trying to score any brownies points here it doesnt matter to me whose suggestion is eventually marked as correct. Sometimes its just nice to get an acknowledgment once in a while, or feedback for the time spent diagnosing issues, so thanks for coming back to complete the circle, its what keeps us regular contributors contributing rather than feeling we are just talking to a brick wall.

Im pleased you have now got it sorted which is the most important aspect.

Report · Sep 01, 2021

Osgood:

You are absolutely right! I had mistaken the fact that it was YOU who had found the misplaced Script!

There were a slew of really helpful messages and I failed at first to notice that your eagle-eyes were the ones which actually saw the reason for my problem.

This site-building is still in its early days (many tweaks and links to subsidiary pages still need to be done) but you can see that the menus and main links between the primary pages are now working "Responsively".

https://taumel.shelbourne-america.net

Report · Sep 01, 2021

Osgood:
You are absolutely right! I had mistaken the fact that it was YOU who had found the misplaced Script!

There were a slew of really helpful messages and I failed at first to notice that your eagle-eyes were the ones which actually saw the reason for my problem.

This site-building is still in its early days (many tweaks and links to subsidiary pages still need to be done) but you can see that the menus and main links between the primary pages are now working "Responsively".

https://taumel.shelbourne-america.net

By @AnnShelbourne

Hi Ann,

It's really not an issue, I knew you hadn't just ignored my post deliberately, most likely as you say consumed it in and amongst other posts and just credited the last response, which is easy to do.

Yes, it's working now, one from a David Powers tutorial.

Report · Sep 01, 2021

>>>

Yes, it's working now, one from a David Powers tutorial.

>>>

Indeed! An excellent tutorial which I worked right through several times and from which I learned a tremendous amount.

That Script does a beautiful job; and so simply — provided that the User puts it in the proper place in their html file.

CSS works on one site but not on another

1 Correct answer