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).
Related
I'm working on a static site that has a side nav on some pages and the nav is meant to stick to the bottom of the screen while scrolling. How can I get the nav to stop sticking at the bottom of the parent container? The nav should stay inside the parent.
Right now it continues to stick even after the container is out of view and eventually overlaps the footer.
Here's the demo site:
https://blissful-kare-3ae082.netlify.app/checklist.html
Your element has the attribute "fixed-bottom" as one of its classes. This will affix the y-axis placement of your navigational element to the bottom of the screen, not to the bottom of the parent container.
There are a couple of things you can do to clean this up. If you just want it not to overlap, you can add padding to the bottom of your element; I found that padding it with 100px worked cleanly as in the picture below.
You may also look to affix it to the actual parent container with usage of the "relative" tag, the solution of which is discussed in various other posts on this site:
Fixed position but relative to container
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've converted a bootstrap date module to use only Angular(still in the middle of the conversion). Here is the demo page with the behavior I want to fix.
Click on the input field under "Your Date Range Picker" to see the daterangepicker. I've attached a screenshot of what you should see:
The issue I'm having is that the wrapper(div.daterangepickerdropdown-menu.opensright.ltr.show-calendar) is set to width:auto, but the three child elements, ranges, left calendar, and right calendar are set to float:left. For some reason they end up wrapping so that they stack vertically, and I can't figure out why they aren't side by side horizontally. I've tried playing with clears, setting overflow:hidden to the wrapper, and nothing seems to work. I've spent 4+ hours with the chrome debugger playing with css rules and can't get the wrapper to widen as much as necessary to put all three child elements horizontally.
For a comparison of what it should look like this.
You have nested your dropdown menu within a div with class col-md-4, which has a defined width.
The working demo has placed the dropdown menu outside of this column.
Even though you are positioning it absolutely it is still inheriting the max-width of the column. (you can see this by setting the dropdown menu width to 50%)
You can solve this by changing your HTML structure and positioning your dropdown menu in a similar way to the demo, or by overriding the width using a fixed setting which will adequately fit the child elements, e.g. width: 170%.
The problem here is the following container:
<div class="col-md-4 col-md-offset-2 demo"></div>
You should remove position-relative from the above element so that your date-picker does not inherit properties from it.
Alternatively, you can apply position: relative to the <div class="row"></div> element just above the .demo element and align your date-picker accordingly.
I have a container of fixed height (same problem with max-height) and overflow-y: scroll.
I add dinamically few divs inside it.
When the container is completely filled in, it starts to scroll but the dics inside it overlap, like the new added divs couldn't fit in the scrollable container.
While the container and the divs are made of pure CSS and HTML (without using Angular Material's directives and not even paddings which occasionally cause problems), I noticed that some global style applies.
Any clue?
Two images are attached to show the problem, the first one without overlap (the container div of max-height: 350px is not yet full), the other where overlapping starts occuring and gets worse the more I add content.
I noticed that the issue occurs even without overflow-y: scroll.
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).