So I'm fairly new to Bootstrap/Bootstrap Studio and I'm in the process of making a website.
I found a really cool navigation system called "Circle nav" online and I'm trying to use it to take me to different pages. Issue is the whole thing collapses in mobile formats and I can't figure out how to get it to resize for mobile.
This is It in working condition: https://imgur.com/vnS3r6v
Not working in a mobile format: https://imgur.com/cHG9SKZ
As you can see, everything falls apart once it gets to a mobile size.
I got the navigation component from the "Online" section in bootstrap studio, It's called "Circle Nav" and here's a link to it in google drive, just the glitched bit in a bootstrap file. It doesn't show the proper navigation thing in the editing view, you have to preview it and then it shows. If you reduce the width of the tab, then refresh the tab, it all falls apart...
Doesn't appear to be anything you did wrong. The component itself is simply poorly designed, and doesn't reduce gracefully for smaller screens. I'd try contacting the person who created and added it to the library. Unfortunately, I don't have the time to go digging into the code to figure out what they did wrong. But if I could play devil's advocate, I'd say ditch this component as a means of navigating your website. It's novel, but ultimately inefficient, and provides a poor user experience (even if it did work correctly on small screens.)
Thanks! Is it possible to put the code into a container, and have it be "disabled" or replaced by a drop-down menu once the screen gets too small? Like the navbar does when there isn't space to show all the link, and it makes a drop-down menu.
That's basically what happens with most navs so I would say you should be able to do that. If it's that important to you to use this nav you found, then hide it at a specific breakpoint and create a new one that is always hidden until that breakpoint. Same scenario really as a normal nav, just they have better scripting for things than this would have.
The component itself is simply poorly designed, and doesn’t reduce gracefully for smaller screens.
and
If it’s that important to you to use this nav you found, then hide it at a specific breakpoint and create a new one that is always hidden until that breakpoint.
on bootstrap4 don't forget you're designing mobile-first. So keep the poorly designed hidden until a specific breakpoint, and create and show a new one for smaller screens that get hidden at the same min-width