Skip to main content
A
AnnShelbourne
Inspiring
August 31, 2021
Answered

CSS works on one site but not on another

  • August 31, 2021
  • 2 replies
  • 1261 views

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

    This topic has been closed for replies.
    Correct answer osgood_

    The link to the Weaver Site  is:

    https://weaverconstruction.co


    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.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 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
    A
    AnnShelbourneAuthor
    Inspiring
    August 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.

    A
    AnnShelbourneAuthor
    Inspiring
    September 1, 2021
    quote

    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.


    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.

    A
    AnnShelbourneAuthor
    Inspiring
    August 31, 2021

    [Irrelevant code removed by moderator.]

     

    A
    AnnShelbourneAuthor
    Inspiring
    August 31, 2021
    [Irrelevant code removed by moderator.]
     
    A
    AnnShelbourneAuthor
    Inspiring
    August 31, 2021

    The Taumel HTML and CSS files:

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices