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.
Related
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
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?
How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/
I have a website setup using bootstrap and have the navbar done to my liking. Now I have to work on my container. I wanted something like this image here (http://awesomescreenshot.com/0d61zypfff). The main container overlaps the navbar a little bit. I have used these classes for my navbar and have laid out what I think would be the ideal layout of the code..
<div class="navbar navbar-inverse navbar-static-top" role="navigation"></div>
<div class="container"> //Please do not add any styling to the container
<div class="index"> //background: #ffffff;
This text overlaps the menubar
</div>
</div>
I have added extra padding-bottom to the navbar to make the navbar a little more "buff" and want my index section to overlap it.
Please let me know if I need to add more information.
To add onto #isherwood, you must also set the z-index: -1;. This will make it so that the index div will overlap the navbar.
A little negative margin should do it:
navbar {margin-bottom: -20px;}
Or:
.index {margin-top: -20px;}
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