Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ A newbie's problem with making a navigation dropdown

Posted by: StrikeMan1002 Dec 7 2021, 01:44 PM

Hello, I am Wilfred Thompson and I am a newbie when it comes to web design. My problem is that I am having a difficult time understanding CSS, HTML, and the HTML element Script which is why my navigation dropdown is a broken mess. My aim is to create a navigation dropdown that starts from a small button with three lines that will ultimately drop down the menus Home, Gallery, About, and Contact vertically and then the close symbol will also appear which will hide the menus if clicked. I want the three lined button dropdown navigation to appear only after reaching screen width 1044 pixels and below because I am fine with the menus being shown and in-line with each other side by side from width 1045 pixels and above. How can I fix this? Please help.

My HTML file and CSS file for the website I am talking about is in the attachment below. Please check on it to further understand my point.

Sample_Website.zip ( 3.52k ) Number of downloads: 174

Attached File(s)
Sample_Website.zip ( 3.52k ) Number of downloads: 106

Posted by: pandy Dec 8 2021, 11:32 AM

I don't understand. You talk about JavaScript but there is no JS in the zip. There is a huge style sheet though. Why is it so big? Is this some kind of ready made menu you try to use and the CSS came with the JS?

Posted by: nootkan Dec 18 2021, 04:01 PM

I too had a look at your zip file and found the js inline with the html.

Everything seems to work with the page on my laptop except the menu opens immediately instead of waiting to be clicked from the hamburger icon.

Also the closing method isn't found until actually moving the cursor to the second link than it appears and when clicked, closes the menu but trying to open the menu again via the hamburger icon doesn't work.

I'm not sure why you have so many media queries, they maybe contributing to the conflict but I am not 100% sure on this. I tried playing around and removing most of them with no real solution.

It looks like your style sheet is a mixed bag of css from other sources that you've added so maybe start over and work your way through the style sheet adding one at a time to see the results.

Other than that, I would say it looks like a js issue for sure but I am not fluent in js so maybe try asking a js expert for advice or if pandy is right and you got the whole nav bar menu script from a third party and incorporated it into your webpage, try to solicit them for support.

Sorry I couldn't be of more help.

Posted by: pandy Dec 18 2021, 04:25 PM

What the heck did I download?