Now that [nearly] everything is based off rems, the navbar seems to have some funky height properties. For one, the navbar height is variable while the padding is a static 8px on top and bottom.
As a result of the navbar's pseudo-dynamic nature, simply setting the body's padding-top to 50px no longer works. If the user changes their font size, the bar height will no longer be 50px.
Has anyone figured out how to give the body an appropriate amount of padding to keep it exactly below the navbar when scrolled to the top of the page?
It seems like a regression if one has to use jQuery to accomplish this, but perhaps that's the only way.
Example code:
body {
padding-top: 54px;
background-color: blue;
}
div.container-fluid {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
google.com
</nav>
<div class="container-fluid">
<p>I am content that is getting overlapped by the navbar!</p>
</div>
Note how the bar overlaps at some font sizes, and there is a gap at other sizes. On Mac OS X you can change font size with command+minus and command+plus
EDIT: I have raised an issue on the bootstrap 4 github page. The bug is confirmed, but it might fall out of scope since they typically don't support zooming effects.
i can confirm your issue for chrome. The calculated height of the navbar change when zooming. The preceding results in a gap for zoom levels of 125% and 175%, see below:
For 125% the calculated height of the navbar = 53.6 (37.6 + 8*2) instead of 54.
Possible related: Is Chrome rounding media query em units wrong?
Related
I am using react-responsive-carousel and when I switch to mobile view, there is a bunch of white space below. I have tried everything I can think of to remove this including body { overflow-x: hidden }. When looking in the dev tools, is appears to be the ul.slider.animated .
Displaying white space below image carousel
Here is a codesandbox with my issue reproduced.
Update:
I've just had a look through your example and it's not the same issue I had, so my answer below doesn't apply to this particular question.
Regarding your actual question, I think this is more an issue of responsiveness in general as opposed to anything specific to react-responsive-carousel. The reason for the whitespace is because you've hardcoded the height of the carousel slide to be 90vh so there is only a small range of page sizes in which the aspect ratio of the carousel slide is compatible with that of the image leading to no whitespace below the image.
Here's my solution, although it means the footer is no longer fixed at the bottom.
Remove min-height: 100vh; from .page-container in styles.css
Remove height: 90vh; from .carousel .slide in carousel.css
Remove .carousel .previous { height: 90vh; } from the media query at the bottom of carousel.css.
This will no longer restrain the carousel to a fixed height and will remove the whitespace by allowing the footer to always join the bottom of the carousel. If you do really want the footer to be at the bottom, then another possible option is setting position: fixed; in footer.css and using portrait images when you switch to mobile mode. But again, you'll have to mess around with scaling and aspect ratios though not to the same extent as with only landscape images.
Old (and irrelevant) answer:
I had a similar issue and what worked for me was setting the showThumbs prop to false like so:
<Carousel showThumbs={false} />
For extra info, the bit you're looking for in the dev tools is the following:
<div class="carousel-root">
<div class="carousel carousel-slider">...</div>
<div class="carousel">
<div class="thumbs-wrapper axis-vertical">...</div>
</div>
<div>
That <div class="carousel carousel-slider"> is the main bit where your content sits and the <div class="thumbs-wrapper axis-vertical"> is probably for a row of thumbnails. Setting showThumbs={false} removes that second div.
The only way I am able to keep my navbar transparent so far is by setting it to fixed-top like such:
<nav class="navbar fixed-top navbar-inverse">
<!-- more html -->
</nav>
As you can see here.
I wish for my navbar to be stuck at the top of my page and to be transparent at the same time. Removing fixed-top removed the transparency and pushes my landing page picture (and component as a whole) under the navbar (when it should overlap the picture).
How can that be achieved?
Try this:
<nav class="navbar navbar-overlay navbar-inverse">
<!-- more html -->
</nav>
Then in your CSS write this:
.navbar-overlay {
margin-bottom: -104px; // Pulls the content under the navbar up by 104px which is the height of your navbar.
z-index: 1; // Tells the browser that your navbar should be ontop of your content. This allows your links in your navbar to still work when you hover over them.
}
The navbar is transparent by default
The recommended method to accomodate the fixed-top navbar is to use padding-top:56px on the body.
Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.
https://getbootstrap.com/docs/4.0/components/navbar/#placement
If you only want to apply the transparency, when the background image is visible, you can conditionally apply the position:fixed like this: http://codeply.com/go/4ElKQpnhy3
I ran rails generate scaffold pins description:string. The header covers pins as below. I don't know how to fix this. I tried some with css but didn't work. Does anyone know solutions for this?
You could try applying margin-top to the content of the page. The margin should be the same height as the header or greater.
I assume you are using a bootstrap navbar - you need to add padding to avoid the overlap - from navbar docs
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Is this even possible via Twitter Bootstrap
http://www.usatoday.com/opinion/
When you scroll down, only the menu portion should remain affixed in the top ? If anyone has handy jsfiddle version, it would be really nice.
You can get it working by taking the navbar and using the affix plugin. I have a (very rough) working example here: http://bootply.com/87472. The important bits are in the CSS:
header { //this is whatever is sitting above the navbar.
height:50px; //this can be set to anything, just make it match
//the data-offset-top in the HTML (see below)
}
.affix {
width:100%; //makes sure the "affixed" navbar stretches the full width
top:0; //makes it stick to the top when it gets there.
}
.affix + p { //this is whatever is sitting below the navbar
margin-top:70px; //set to the total height of your navbar
}
The bit in the HTML you need:
<div class="navbar navbar-default" data-spy="affix" data-offset-top="50">
As mentioned above, data-offset-top should match the total height of whatever element is sitting above your navbar.
As for the fancy effects, I would suggest you check out css transitions to make that magic happen.
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed