I'm making a web page and I'm facing this issue, I have a nav bar which is fixed and working fine. I have two sections for now and when scrolled first section works fine but other one is overlapping the Nav which I'll show it to you via JSFiddle.
What I have tried so far is that to make the .items display as block but didn't get the solution.
Tried using position as absolute but it affected my view. So for now everything is working fine except this one that the section 2 which testimonial-one is overlapping the header the first section is working fine.
I have also tried using this nav-fixed-top in my bootstrap nav but it didn't work out.
.navbar { padding: 26px !important; position: fixed!important; width: 100%}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>
This is my JSFiddle link, kindly help me. Thanks. Link : JSFiddle Work
You can solve this by adding a z-index to your navbar. This will place the navbar on a "higher layer" than the rest of the content.
.navbar { padding: 26px !important; position: fixed!important; width: 100%; z-index: 10;}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }
.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}
.testimonial-one {padding: 0}
.testimonial-one .content-offset {
position: relative;
min-height: 400px;
}
.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">
<img src="img" alt="TESTING">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-2"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#page-1">HELLO</a>
<a class="nav-item nav-link" href="#">WORLD</a>
<a class="nav-item nav-link" href="#">HOW</a>
<a class="nav-item nav-link" href="#">ARE</a>
<a class="nav-item nav-link" href="#">YOU</a>
<a class="nav-item nav-link" href="#">FINE</a>
</div>
</div>
</div>
</nav>
<section class="home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<section class="testimonial-one container" id="page-1">
<div class="content-offset">
<img src="assets/images/left.png" alt='' class="prev"/>
<img src="assets/images/right.png" alt='' class="next"/>
<div class="container">
<div class="items">
<div><p style="font-size:80px">Hello</p></div>
<div><p style="font-size:80px">Hello</p></div>
</div>
</div>
</div>
</section>
</body>
</html>
Related
I need help with bootstrap container and row width.
I have created a container and a row inside it. I have everything inside the row, but for some reason content sizes are different as displayed on jsfiddle and image preview.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>xGhost.cz | Československý Gamehosting.</title>
<!-- meta data -->
<meta name="author" content="Jan Dvořák">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- styles -->
<link rel="stylesheet" href="css/style.css">
<!-- BOOTSTRAP START -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- BOOTSTRAP END -->
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="row">
<div class="col-lg-1">
<img src="img/xGhost.svg" alt="" style="width: 300px; height: auto;"/>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2">
<a class="navbar-brand" href="#" style="font-style: italic;">xGhost.cz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
<li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
<div class="row gx-2 mt-3">
<div class="col-md-8">
<div class="box">
<div class="box-heading">Novinky & Blog</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-heading">Přihlášení</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
text-align: center;
}
.nav-link:hover {
color: rgba(39, 174, 96, 1.0) !important;
}
.box {
width: 100%;
height: auto;
}
.box-heading {
background: #212529 !important;
color: #fff;
text-align: center;
padding: 7px;
width: 100%;
}
JSFiddle: https://jsfiddle.net/1c9w3taq/
Image preview
On the image you can clearly see, where the spaces are. It all should be aligned from side to side inside the container. Logo column width is missing a few pixels on the right and the two boxes in the bottom are not touching the sides of parrent container.
The problem is from this div.
<div class="col-md-8">
as well as <div class="col-md-4">
Yes they both equal 12 but they contain a margin.
To fix this you can add a class like this.
.nomargin{
margin: 0px !important;
}
And use the class like this
This will remove the default bootstrap margin.
Basically I have 3 main components: 1 navbar, 1 content div separated in sections and 1 footer.
I've finally made my design responsive with for the first two components but not for the footer.
my content container (parent) have the class h-100 that sets the height to 100% child also have a 100% value only problem is that when I use inspector I see my parent container recognized as having a the size of the screen and because of that the footer is placed after the first section (there's 3 or more sections that should be 3 or more times the height of the screen minus the navbar)
here is a reproduction of the resulting html (I'm normally using Angular)
#media (max-width: 979px) {
.section {
padding-top: 0px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 60px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hello
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hi
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hey
</div>
</div>
</div>
<div class="row">
Footer is not placed correctly
</div>
Your issue is that your are specifying height 100% for the container, but 100% of what? In your case the body tag, but the body gets it's height from the size of your content(which on full screen is about 1000px for the first content box), then you also specify 100% height for each of your content boxes. Again 100% of what? The container, which is 1000px is this example. So the footer jumps up after what it thinks the size of page, but then each of the additional content boxes also get that same height, which leads to your weird situation.
In short if you need to keep the 100% height on the container, try adding overflow: auto to the container. Otherwise you could remove the 100% height rule from the container.
here is my solution.
please tell me if it is not a best practice.
every row is wrapped into div with h-100 as class and it works
I also removed container-fluid
HTML
#media (max-width: 979px) {
.section {
padding-top: 48px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 48px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hello
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hey
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
ola
</div>
</div>
</div>
<div class="row">
Footer is placed correctly.
</div>
Since I am not able to make the background transparent, means I want the image opacity should be minimum and the text written on it should be highlighted. Please help me out from this. As I used css opacity but the whole div is getting transparent with the text also written on it.
Here is my html and css:
.bgimg{
background: url('bg2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 600px;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Book Appointment
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
</div>
I think this is what you need. We can achieve background transparent by using pseudo class. Please check the below code.
.bgimg{
width: 100%;
height: 600px;
}
.bgimg::after {
content: "";
background: url('https://images.pexels.com/photos/137219/pexels-photo-137219.jpeg?auto=compress&cs=tinysrgb&h=350');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.headerset{
padding-top: 250px;
box-sizing: border-box;
}
.headerset h2{
font-size: 40px;
}
.headerset h1{
font-size: 82px;
font-weight: bold;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
<nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
<div class="container" style="height: 50px">
TheCureKit
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="" class="nav-link text-white hvr-underline-from-center" >Book Appointment</a>
</li>
<li class="nav-item">
Book Tests
</li>
<li class="nav-item">
Order Medicines
</li>
<li class="nav-item">
Login|signup
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center headerset">
<h2 style="color: black;">Welcome to our studio</h2>
<h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
<button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
</div>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
I am trying to put my "Sanchez Designs......Ms Sanchez....and "Web Developer, Artist and Higher Education" buttons midway into the page, right about at the peak of the mountain. I have researched and tried but am unable to move it. I thought padding-top would do the trick but nope. Any suggestions?
Also, I'm learning web development so please be gentle. Thanks!
body {
background-image: url('images/background3.jpeg');
width: 100%;
height: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: 'Lato', sans-serif;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">Andrea Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_artist.html">Artist</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_highered.html">Higher Education</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="content">
<h1> Sanchez Designs</h1>
<h5> Ms. Sanchez is an aspiring Web Developer</h5>
<hr>
<ul class="list-inline intro-social-buttons">
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_about.html" class="btn btn-dark btn-lg">
<span class="network-name">Web Developer</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_artist.html" class="btn btn-dark btn-lg">
<span class="network-name">Artist</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_highered.html" class="btn btn-dark btn-lg">
<span class="network-name">Higher Education</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
IF you want padding top try
padding-top : 20px!important
if you want div test in center why you try padding top or bottom . you can use a extra div and give style display: flex; align-items: center;
.banner {
height: 80vh;
align-items: center;
vertical-align: middle;
display: flex;
}
like : https://www.w3schools.com/code/tryit.asp?filename=FNBF6UP5MV4S
There are a lot of way to add padding or margin here.
You can add padding-top to your .col-lg-12 if your content and navbar have 2 different container by simply add another class and add padding to it.
HTML
<div class="col-lg-12 text-center padding-content">
<div id="content">
...
CSS
.padding-content {
padding-top: 30px;
}
Demo: https://www.bootply.com/jpU6nmgw8z
Or you can add margin to your navbar
CSS
.navbar {
margin-bottom: 30px;
}
Demo: https://www.bootply.com/k6vGFbX5XC
Did you try adding margin-top to say, the "content" div?
#content {
margin-top: 5%;
}
Codepen link: https://codepen.io/anon/pen/zpRQVL
I am using an absolutely positioned navbar in twitter Bootstrap, however when I use the .pull-right class inside of my tag with the navbar items the navbar items stay to the left. I have also tried using float: right; and text-align: right; and those didn't work. Does the absolute positioning of the navbar affect this behaviour? How can I get the navbar items to go to the right hand side of the banner?
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here you go with a solution https://jsfiddle.net/j6sqyru8/
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
.navbar-toggle {
z-index: 9;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
Hope this will help you.
parent div with id="responsive-nav" must be width 100%
Add width: 100% to the #responive-nav.
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
width: 100%;}