I'm currently using this snippet for a navbar:
http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation
I've edited some content of the navbar but now I want to align the navbar and the hamburger to the right. I've already tried floats and margins but nothing seems to work.
Thanks.
Here is the code:
http://bootsnipp.com/snippets/Ol10M
You need to remove Bootstrap's navbar-fixed-top {left:0} to allow the sidebar to float to the right. I just replaced it with "left:auto" in the first style of the CSS in that snippet.
Then you need to replace all the "left" instances with "right" except for the last css rule for the overlay.
Related
I have a problem fixing the navbar to the bottom of the page. I need it to appear only when the page reaches the end, not that it stays fixed on the page.
I am using the Navbar component of react-bootstrap (https://react-bootstrap.github.io/components/navbar/).
Here is a gist with an example:
https://gist.github.com/fredarend/5f6c30d600a37faf9e4f983da0133e31
The navbar has the option "sticky = bottom", however, it is not placed at the bottom.
Here is a JS Fiddle of the problem for reference:
https://jsfiddle.net/ncoughlin/1fjxy230/4/
I am having an issue where I am trying to get a vertical bootstrap nav menu to inherit the width of it's parent element, which is a CSS Grid column. For the sake of troubleshooting I have put the background of the grid column to red. So I am essentially trying to get the dark gray vertical nav on the left hand side to match the width of the red Grid column.
The bootstrap nav has id #settings-nav
I have tried the basic stuff like adding the bootstrap class w-100 to the nav ul or in the stylesheet adding width: 100%; however both of these make the menu stretch over the entire viewport instead of the parent element, which is the Grid column. It's behaving like the Grid column is not it's parent element, but using inspector I know that it is...
Please let me know where I am going wrong here. Thank you.
The problem ended up being that the #settings-nav was set to position:absolute, which makes it so that it ignores the dimensions of the parent element. Changed to position:relative and it works perfectly.
I'm trying to get a Bootstrap 4 Navbar to only collapse partially.
Basically I want some items aligned to the right to remain visible at all times, while most of the Navbar items to the left will collapse into a menu if you try to open the website on mobile.
The problem is that, when you expand that menu, the collapsed elements are showing before the fixed menu, as you'd expect them to, but I want them to show below, for obvious aesthetic reasons.
Working example: http://jsfiddle.net/sfm70xLe/
Desired outcome while expanded:
Desired outcome while acessing the collapsed items:
I've been playing around with the disposition of the elements aswell as trying float-right and float-right but it's proven ineffective, I'm not sure how to proceed with this without making drastic changes to the foundation Bootstrap laid for me. Any ideas?
If you move the navbar-header div up before the navbar-collapse div in the HTML it will work. Then you will just need to use order to move the navbar-header to the right for sizes larger than medium.
In bootstrap 4.0, I want to overlay the navbar above the contents of a page, rather than push the contents down, when the navbar expands from the collapsed state after clicking the hamburger.
I've tried setting a z-index property on the navbar class and several others. Also tried to put a wrapper around the nav element and set z-index: 1000 and position: absolute on that. So far I haven't managed. Any help would be very much appreciated.
Add fixed-top class to your navbar.
When using a fixed-top navbar, your <body> element needs a padding-top property equal to the height of the navbar (normally 70px - but can differ based on the theme).
The above is also true for fixed-bottom navbars (at the bottom end).
I'm having trouble creating Navbars while implementing Grid LayOut.
https://codepen.io/Aeshtray/pen/BdqeZL
In mobile view, I want the Navbar to be horizontal (as coded), but fixed,
whereas after the first breakpoint, at 500px width, I want the Navbar to be Vertically Fixed on the left side.
I already tried setting the position: fixed but that only jumbles up my whole layout.
Made some css tweakings, checkout this fiddle https://codepen.io/anon/pen/LjgoKE?editors=1100
Updated pen: https://codepen.io/anon/pen/BdGBBo?editors=1100