I want to place a div above a twitter bootstrap navigation menu, Intro is the div that I want to display above the menu which must be fixed. The issue is I have placed a background image on the menu, but it shows the background image on the Intro div as well, I want to display the background image after the Intro div. Please help me solve this issue.
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="container">
<div class="navbar-header">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li> Home </li>
<li> Contact </li>
</ul>
</div>
</div>
.navbar-inverse {
background-color : #fffff;
border-color:transparent;
background: #ffffff;
url('bgimg.gif') repeat-x;
}
Move <div id="Intro">above the navbar code:
<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
Add some space on top of navbar-fixed:
.navbar-fixed-top {
top: 20px;
Make this size the height you want for <div id="Intro">
Add additional styling to <div id="Intro">
#Intro {
top: 0;
position: fixed;
EDITED:
Additional styling for intro div. Add some dimensions and background color to intro div. Try this :
#Intro {
top: 0;
position: fixed;
background-color: #fff;
height: 40px;
width: 100%;
}
Related
I have a problem with the navbar-fixed-top item. It hides content form the container.
This is a common problem solved by adding the following css code :
body { padding-top: 70px; }
Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.
I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.
Here is the code below :
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
Go to test1
</li>
<li class="nav-item">
Go to test2
</li>
<li class="nav-item">
Go to test3
</li>
<li class="nav-item">
Go to test4
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
Here's the solution
body {
padding-top: 70px;
}
#test{
padding-top:90px;
}
#test2{
padding-top:90px;
}
#test3{
padding-top:90px;
}
#test4{
padding-top:90px;
}
For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed.
Hope that helps.
From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.
I have add this class in the css file :
.hreflink::before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
and then I have define every element I want to go to with this class, for example :
<div id="test3" class="hreflink">
So since im new I cant show you guys any pictures to demonstrate the issues that im having, but ill try to explain it to you in the best way.
I have a background-image: url(), that works as my "hero" for my website, I also have a bootstrap button that i use as a "browse your pc for a file" button, but for some reason the button isnt clickable when inside my hero tag, only when i put it outside.
HTML
<body>
<div id="hero">
<div id="hero-overlay">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">AppInvest</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Upload</li>
<li>Analyze</li>
<li>About</li>
</ul>
</div>
</nav>
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none;">
Browse...
</label>
<div style="background:transparent !important" class="jumbotron text-center">
<h1>
AppInvest
</h1>
<div class="container">
<div class="row">
<div class="col-sm-1 text-left">
<p>Who are we?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
}
#hero {
background-image: url('../img/rarri.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#hero-overlay {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -5;
background-color: rgba(0,0,0,0.5);
}
Also if you could give me some tips on the best way to make an upload button with a "total files attached" at the center of the screen i would appreciate it.
And yeah obviously its CSS and HTML related.
The button isn't clickable because of the negatvie z-index of #hero. the z-index has no effect anyway in this szenario so i removed it and it works:
https://jsfiddle.net/967h3ty2/
To have a "total files attached" at the center of the screen you need to count the uploaded files on the server side using php or a similar technology.
I am not a front-end developer so I suspect I might be missing something really basic. Nevertheless I cannot figure out a solution.
I have a div element and I simply want to apply some padding at the top so that it does't interfere with the heading. I have looked around and I have seen similar problems with margin collapsing but I don't think it's the case since here I am dealing with two separate div not enclosing each other (tot-header and content).This is what I have written so far.
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
and the css
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
However the padding seems not to work. Any ideas?
What browser are you using? From what I can see it seems to be working perfectly. There is a huge space between the two divs caused by the padding-top of the .content div. That is until your scroll, because your top header has a fixed position.
This is your code:
http://codepen.io/anon/pen/WweMPG?editors=1100
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
The code appears to me to be working perfectly. What did you expect it to look like?
remove
position:fixed;
and change your .content css
from padding-top:10cm; to padding-top:10px;
in your css you can try using pixels instead of cm e.g.
.content {
padding-top: 100px;
}
Also you may try using margin instead of padding e.g.
.content {
margin-top: 100px;
}
And give it more padding or margin untill your content appears
I am currently building a website using bootstrap.
This is my HTML file:
http://www.bootply.com/D5ltZOOcQE
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee</li>
<li>Events</li>
<li>Constitution</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Welcome to my website.</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4" align="center">
<img class="contact" src="img/facebook.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/emailIcon.png" height="120" width="120">
</div>
<div class="col-sm-4" align="center">
<img class="contact" src="img/twitter.png" height="120" width="120">
</div>
</div>
</div>
So, what I wanted to do is have a big jumbotron, similar to the one in the getboostrap.com website. That means I wanted it at least twice the size of my current jumbotron.
In the <head> of my HTML file, I have a place where I have put a special rule for my jumbotron, so that I include the picture and also some other stuff. This is the code:
.jumbotron {
position: relative;
background: url('img/background.jpg') no-repeat center center;
overflow: hidden;
height: 100%;
width: 100%;
background-size: cover;
}
However, when I change the size of height to 500px for example, I see no change. I think this is because my jumbotron kind of adapts to the size of my container? So if I add more text it will grow but now it doesn't. However, I want the whole picture to show, and this doesn't happen right now.
Any help is welcome :)
Just to add to this, and not necessarily saying this is the ultimate solution. I rarely touch any of the built in bootstrap code and create my own classes. These normally will apply no problem to any bootstrap classes you may be using. for instance.
<div class="jumbotron customclass">
.customclass {
width: 100%;
height: 500px;
}
This generally always works for me best and you avoid messing with bootstrap directly which could potentially break other portions of your website if you have already designed quite a bit utilizing bootstrap.
Very rarely do I ever target bootstrap classes directly.
You can see an example from your original bootply here: http://www.bootply.com/Qcdz3AxWvP
I added a background color as well, just to show how creating your own class works just fine.
In your Bootply you have the height set at 100% and your question states 500px which maybe matters and may very well not. The Jumbotron class doesn't have a set height, padding is used instead. Setting the height should be no different then the rules in your question so perhaps you have multiple jumbotron rules or you haven't placed your stylesheet after bootstraps.
*(you should have zero need to use !important)
Bootstrap Rules (Not complete)
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 15px;
padding-left: 15px;
border-radius: 6px
}
.jumbotron .container {
max-width: 100%
}
#media screen and (min-width:768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px
}
.container .jumbotron,
.container-fluid .jumbotron {
padding-right: 60px;
padding-left: 60px
}
.jumbotron .h1,
.jumbotron h1 {
font-size: 63px
}
}
See working example Snippet at FullPage.
/*FOR DEMO ONLY*/
.navbar.navbar-inverse {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
.jumbotron.jumbotron-one {
position: relative;
background: url('http://placehold.it/2000x500/f00/fff') no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
margin-bottom: 0;
}
#media (min-width: 768px) {
.jumbotron.jumbotron-one {
height: 500px;
}
}
.jumbotron.jumbotron-two {
position: relative;
background: url('http://placehold.it/2000x500/ff0/fff') no-repeat center center;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-inverse navbar-static-top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Santorini</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Committee
</li>
<li>Events
</li>
<li>Constitution
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron jumbotron-one">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Height 500PX</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
</div>
<div class="jumbotron jumbotron-two">
<div class="container">
<h1>Welcome</h1>
<p class="lead">Default Height (padding)</p>
<p class="lead"><a class="btn btn-large btn-primary" href="www.google.com">Become a member</a>
</p>
</div>
My guess is bootstrap.css is overriding whatever custom css you have. To correct this, change custom css height to this height: 500px !important, or load your css file before bootstrap.css (Remember, when 2 CSS files are used, the first one loaded always takes precedence, unless !important is used.)
I have a bootstrap webpage with header and footer and I would like to set a background image for the div in between.
My goal is that the background image could cover all area between header and footer (div id=xx in code below) while I don't need to hard coded height and width, but failed.
Can you please help?
<body>
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" style="background:url(images/background.jpg) no-repeat;background-size:940px 500px;height:500px;width:940px" title="KnowSG" align="left" id="hplogo">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
CSS
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -50px;
}
#push {height: 50px;}
.footer {
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
padding-top: 15px;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
Okay I cleaned your code up a bit. You had 2 id attributes on the same element which you shouldn't do. and I added a class.
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" title="KnowSG" align="left">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
#xx {
background-image: url('http://placehold.it/1920x1080.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Is it possible that your background image is either not where you think it is, or missing? Quick test: in a new browser window: http://yourdomain.com/images/background.jpg (using the file / dir names from your question code)
This might be the problem: Note also that if you have an external stylesheet (in your example you styled the #xx div using inline html attribute), and if that stylesheet is in a subfolder, such as /css, you must do this (because the images folder is not directly underneath the css folder):
background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */
I created a jsFiddle and substituted the placeholder website placekittens.com for your hard-coded image - it works fine.
jsFiddle Demo
Observations:
If you want the background image flush up against the header and footer, you must make these adjustments (as I did at top of the jsFiddle's CSS):
.container-fluid h3 {margin:0;}
.navbar {margin:0;}
You can do this if you want the bg image flush up against the header, but not the text:
.container-fluid h3 {margin:0;padding:50px;}