Problem with Responsive Topnav Example

[adam12]

I'm having a problem implementing this Responsive Topnav Example.  I've copied the code as is, without any change and it just does not behave like on the w3 site.  It fails to reduce in width below about 750px and the mobile menu never appears.  Interested to know if anyone else has tried this!  Also, how can the selected menu item be shown by color as being the active item? Appreciate some help with this.

[Ingolme]

Have you added the meta viewport tag to your page? This is necessary for a responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

[adam12]

Thanks for your reply.  As I mentioned, I copied the code as is, without any change and it just does not behave like on the w3 site.  It fails to reduce in width below about 750px and the mobile menu never appears. 

[dsonesuk]

I don't understand the 'don't reduce to 750px'.

The mobile menu only shows to 600px, it does not reduce size? Unless you have added width 750px which won't work properly cuz you are increasing width bigger than viewport area of 600px.

If you have added a media querie for max-width to accomadate 750px width it has to be in right order to work, else the 600px media query will overide it.

[adam12]

On 3/24/2022 at 12:57 AM, dsonesuk said:

I don't understand the 'don't reduce to 750px'.

The mobile menu only shows to 600px, it does not reduce size? Unless you have added width 750px which won't work properly cuz you are increasing width bigger than viewport area of 600px.

If you have added a media querie for max-width to accomadate 750px width it has to be in right order to work, else the 600px media query will overide it.

I've just copied the codse3 as is from the w3 site and it has @media screen and (max-width: 600px) however when I test the code it and the page fails to reduce in width below about 750px