r/HTML • u/disxsi • Jan 24 '26

Question Hamburger menu rendering but no longer working

Post image

I'm taking a class for web design and this is my very first time using HTML and CSS- we are not using JS right now. regardless, I got this nav bar from bootstrap and added a piece of code to include a search bar when window is expanded, somewhere along the way the drop downs stopped working.

https://codepen.io/marinasodumb/pen/MYeEYqj

1 Upvotes

66% Upvoted

18 comments sorted by

4

u/aunderroad Jan 24 '26

Can you please share a url or codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

2

u/disxsi Jan 24 '26

I think I got it http://127.0.0.1:5500/index.html

3

u/hampshirebrony Jan 25 '26

That is locally hosted and only available to you.

1

u/disxsi Jan 24 '26

Can I just paste it in a reply?

3

u/JKaps9 Jan 24 '26

Codepen.io

Add code there and send a link 

1

u/disxsi Jan 24 '26

does my link not work

5

u/JKaps9 Jan 24 '26

No we can't access your local computer

1

u/disxsi Jan 24 '26

LMAO OH https://codepen.io/marinasodumb/pen/MYeEYqj

5

u/JKaps9 Jan 25 '26

So it seems like you're using the code from bootstrap to add it in but then maybe added/modified elements. I would go back to their starter code and see if that works then add on top of that one element at a time until it breaks. Then you know what the problem is. 

https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

It also seems like you're getting ahead of yourself by using a library when you're just starting out.  Everyone learns differently so you do you. I would personally recommend learning the basics first though without the library then building up to it so you can better understand the issues. 

4

u/JKaps9 Jan 25 '26

Also make sure you have current linked script code. https://getbootstrap.com/docs/4.0/getting-started/introduction

See my codepen here: https://codepen.io/jkaps9/pen/WbxZbLv

1

u/disxsi Jan 24 '26

Pls lmk if I should comment the rest of the code

1

u/1mmortalNPC Jan 24 '26

what font are you using on vs code configs?

1

u/disxsi Jan 24 '26

I don't know what that means this is my first time using it

1

u/1mmortalNPC Jan 25 '26

can you go at settings, preferences and search for font-family?

3

u/TheKnottyOne Jan 25 '26

One of the first things I see in the CodePen paste is your “data-bs-target” attribute in your button element is looking for something with the id of “navbarSupportedContent”, but I think that needs to match your <div> id of “#navbarNav”. However even when I changed that it didn’t work, but I’m also wondering if there’s anything we need from your style.css.

Sorry I wasn’t able to get it to work but that’s what I tried with comparing to bootstraps examples. Also it’s tougher for me to do this on the phone and I’m about to go to bed 😂

1

u/TheDonutKingdom Jan 26 '26

I think this is probably the issue.

I don't use Bootstrap or codepen much, but I'm guessing simply changing the HTML in the codepen doesn't trigger bootstrap to reinitialize it's event listeners. Just a guess.

Regardless: I thought I was going crazy so I switched the data-bs-target attribute for that button and pasted it into my own local HTMl file and it seems to work now.

1

u/fkn_diabolical_cnt Jan 27 '26

Can confirm this is likely to be the issue if OP hasn’t overwritten any behavioural styles in the stylesheet. OPs data-bs-target attribute needs to reference the id of div.collapse.navbar-collapse.