Multiple sticky tops Bootstrap 5 - javascript

Is it possible to have multiple sticky-top navbars in Bootstrap?
Currently, both overlap each other, which is not ideal for me as I want both navbars to be visible.
I cannot simply split the first navbar into two parts as there is some content between the first and second navbars that I need to scroll by.
Just to reiterate, I would prefer a sticky-top solution over a fixed-top one.

Related

Decide how far down bootstrap sticky navbar should be

This is the navbar we are working with.
How can you control how far up or down you want it to be/initialize?
So instead of having it start where it currently is positioned, how can I make it appear e.g. where one of the arrows is pointing?

Layout with two sliding side panels

I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed

Change Bootstrap 4 Navbar expand direction

I've been looking around for a way to have my navbar, which is mounted at the bottom of my home page, expand upward when the toggle icon is clicked. I used a Bootstrap 4 Navbar template that scales with window size. Do I need to use CSS, JavaScript, or jQuery to do this?

Is there a way to collapse navbar-right at a different point than navbar-collapse?

I'm creating a fixed-top navbar for a website (Bootstrap 3) and I'm wondering is there a way to collapse the navbar-right before the navbar-form?
My navbar-right has links to 4 sections of the website but the navbar-form (which is the middle bit on my nav atm) has a search box. I've styled the CSS for it to look good on mobile when it's all in the menu, but it's too wide for tablets in portrait. I've changed the breakpoint for the collapse in LESS to tablet but now everything collapses into the menu on the tablet, which isn't ideal.
I'd like to keep the search box on tablet-portrait and just collapse the links into the menu. Is this something you can do with bootstrap's nav component. Or do I need custom JavaScript for it?

Is there a way to toggle the bootstrap responsive collapse menu upwards instead of downwards

Hi I was wondering if there was a way to toggle the bootstrap responsive nav upwards instead of down. I don't have a fixed bottom nav but still wanted it to go up instead of down and didn't know if this was in their framework or if there was a way with javascript or jquery to do so.

Categories

Resources