Bootstrap 4 responsive navbar collapsible button

Question

I'm trying to code a navbar using bootstrap 4, that will show a collapsible button in xs screen sizes and below. I achieved this, however when the button is clicked, the nav links push the button and brand name down, and appear above them, within the navbar. I want them to appear below the navbar.

Can anybody help me with this?

I know the code posted here won't work without the bootstrap plugins, however I thought it might be helpful anyway.

Thanks!!
https://code.sololearn.com/Wr1DrWY3IQ8t/?ref=app

Answer 1

Right now the button is not responsive for me on my iPhone or my PC (reducing the width of the browser so it shows the burger menu button). Although I can't help solve your original problem, I wanted to suggest using CDNs for libraries you import when sharing code at SL so that people can actually run it. The CDN for Bootstrap is:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Answer 2

@kevin thanks. I received some help for this via stack overflow in the end, but I didn't know how to work the CDN, so thanks for your help!

Answer 3

Hiii guys is there boostrap4 in the solo learn and Angular also