The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> A newbie's problem with making a navigation dropdown, This topic is about making drop downs in for websites
StrikeMan1002
post Dec 7 2021, 01:44 PM
Post #1





Group: Members
Posts: 1
Joined: 7-December 21
Member No.: 28,191



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.

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


Attached File(s)
Attached File  Sample_Website.zip ( 3.52k ) Number of downloads: 9
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2021, 11:32 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,002
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nootkan
post Dec 18 2021, 04:01 PM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 16-July 21
Member No.: 28,016



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.

This post has been edited by nootkan: Dec 18 2021, 04:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 18 2021, 04:25 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,002
Joined: 9-August 06
Member No.: 6



What the heck did I download?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 27th January 2022 - 09:53 PM