I am having trouble dealing with my navigation bar at anything below 600px. It j

Question

I am having trouble dealing with my navigation bar at anything below 600px. It just goes into hiding. Having a horizontal scroll bar is prohibited by the professor, so I need a fix to this problem. Everything else is fine but the navigation bar is creating a problem as the page shrinks.

Here is the link to the website: http://urcsc170.org/ibashir/project3/index.html
You can access both css and html source code from this link which goes without saying.

And use this website to check at different browser widths: http://quirktools.com/screenfly/#u=http%3A//urcsc170.org/ibashir/project3/index.html&w=600&h=600&s=1

Explanation / Answer

Use media queries:

Declare a new navigation form for sizes below 600 pixels and show a hamburger icon instead of full menu so that the user can see the whole menu as a drop down list on clicking the icon.

Add this javascript:

Then write the menu-mobile css

then add media queries to hide the navigation bar when size less than 600 and show the icon instead.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.