Hey guys, I just recently purchased this to help with website design (I'm terrible at front-end development and more back-end person myself). I'm looking to build a HTML page using BS4 that will allow me to use as my webpage for mobile apps. I plan on using this with a webview in iOS/Android so I only need to build a single site (mobile/ios/android) would all work from a single webpage (I know it's not idea, but it's a lot easier than developing 3 different sites)
My question is this. I'm looking to build a sidebar navigation system. I want it to be similar to most android apps that I've see where you have the hamburger menu in the top left. The main page on the right. I'd like to have it so when you click on the hamburger menu, you get a menu box of the links you want (This looks easy enough), but I want it to slide out from left to right and take up only part of the screen AND overlap the existing page. I don't want to see the current page 'move' to the right to make room for the menu.
Do any of you guys/gals know if there's anything built into this that can accomplish this or is this going to be some kind of custom coding I'm going to need to do?
Have you searched the online component library? I think there's a simple sidebar nav component there, which might serve as a starting point.
Yeah, it doesn't really help much with setting this up. It looks like the sidebar just builds a container with 2 columns and not much else :(
I want it to look similar to this.
What about the one called "Collapsible sidebar left or right"? It looks pretty similar to what you describe, though you'd have to sub in a hamburger for the button. There's a demo here.
I guess I could use that, but that's utilizing BS3 and I wanted to use some of the features of BS4. Guess I could tear it apart and build my own css/js files with the functions it utilizes. Really wanting a bs4 version of something like that.
Ah, I hadn't check on the BS version, Yeah, BS3 is often a deal-breaker for me these days. There are just so many useful goodies in 4 :)
I mean I could get something fairly close (top-down) or something like that, but the css/js modification to make it go from left-right is a bit over my head at this time. Not saying I couldn't figure it out, but it'd probably take me a week to figure it out myself
The demo looks pretty sweet, so if it were me, I'd set aside a bit of time to dig into it and see how easy it is to adapt to my needs. I'm thinking that it should transition pretty well into BS4, and since for me the functionality would be the tricky part, I'd do my best to make the component do the heavy lifting there, whereas editing the css would be no big deal. But that's just me.
When you drag it into the design window, BSS says "Component was converted it to BS4" :-)
If you can get something working, I'm all about it, but I haven't been able to get something working yet.
Just in case anyone else was curious. I found a non bootstrap piece of css to do this here: https://jsfiddle.net/PaulvdDool/rkxeyf1g/
Just going to modify this some and build out my own menu drop down list.
Ok so the first step here is to do the following (from memory as on my phone )
1 - Create a new BS4 design
2 - Drag a nav bar in to your design and in the right hand options panel set the menu to show on left hand side (may need to move/remove brand logo)
3 - one hamburger has been set to left align you can go to this page that the BSS devs have set up on github to get a sexy looking side bar nav that will work how you want to - https://github.com/bootstrapstudio/bootstrap-better-nav/blob/master/README.md
4 - you may need to overwrite some css classes I. Your own css file to make it open from the left
And that should do it I think
You my friend are a hero. I have it running (from right to left, but it's a start. I'll work on CSS stuff to go from left to right soon! Thank you so much!
This one one on the Bootstrap 4.1 Examples page is pretty nice also....
Hey, sorry to vanish there, Brian. It was bedtime here. So glad that Chris swooped in and saved the day!
Ah yes, I think that Bootstrap Better Nav menu is shown in the BSS Tesla video on YouTube.
Yep grayscale that’s the one - it’s an awesome tool that’s he devs have made for us and I love it and think I’ll use it most of the time now
I think I'll be looking into it as well :)
BTW Brian, if you haven't already seen it, that video is a terrific introduction to BSS!
Just found out this better nav jacks up jQuery inside of it. I can't bind any click methods in the links inside nav items