I'm quite new to BOOTSTRAP 5 (Web Development in general) and I am currently trying to make a simple website with it. I've selected a navigation bar but whenever I change my browser to mobile mode, the drop-down which appears does not work at all and all my elements in my navbar disappear. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style type="text/css">
#jumbotron{
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck{
margin-left: 1rem;
}
#logo-space{
background-color: blue;
width: auto;
height: auto;
}
#logo{
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN{
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
You also need to link the JavaScript Bundle for Bootstrap. The mobile menu only works with JS.
The JS Bundle code is:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
All you gotta do is to add the JS dependency to make it work:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#jumbotron {
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck {
margin-left: 1rem;
}
#logo-space {
background-color: blue;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the size of the nav bar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
Related
This is how I want to align text:
And this is my navbar:
I've been trying for exactly 2 days to make this style, somehow I couldn't do it like on Max Back's site
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="">
<span>Emre İlhan</span>
<img src="assets/icons8-verified-account-20.png" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav nav-pills ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><span class="tex-black-50">01</span> Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">02</span> Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">03</span> Link</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Try this code for navbar text-right
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand text-right" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.img-container{
background-color: black;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgb(76, 76, 76);
}
.img{
border-radius: 50%;
width: 40px;
height: 40px;
}
.main{
display: flex;
}
.text{
margin-left: 5px;
padding: 3px;
}
</style>
<body>
<div class="main" >
<div class="img-container">
<img src="33720.jpg" class="img" alt="">
</div>
<div class="text">
<div>Emre Ihan <i class=" fa fa-check"></i></div>
<div style="color: gray;"><i class=" fa fa-check"></i>offical</div>
</div>
</div>
</body>
</html>
It's My code navbar
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mr-auto" style="
margin-right: 18%!important;
margin-left: 8%;
">
<li class="nav-item">
<a class="nav-link" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produk</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
the result of the codingan looks like this picture
picture
but I want the result like this image
I want the result like this image
Please help me to solve this problem thank you.
First step would be to add 2 <ul>. One will be visible on mobile screen and other on desktop.
For Mobile in the middle before the li
<ul class="navbar-nav">
<a class="image-logo" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" alt="mdb logo" height="52">
</a>
</ul>
For Desktop
<ul class="navbar-nav">
<a class="image-logo-center" href="#">
<img src="https://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</ul>
Add your media queries in css.
#media screen and (min-width: 992px) {
.image-logo-center{
height: 100px;
display: block;
}
.image-logo{
display: none;
}
}
#media screen and (max-width: 500px) {
.image-logo{
position: absolute;
height: 52px;
top: 1%;
left: 35%;
}
.image-logo-center{
display: none;
}
}
Full Code : https://codesandbox.io/s/optimistic-meadow-37ofm?file=/index.html
Add more CSS and make changes according to your need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
#media (max-width: 991.98px){
.navbar-brand{
display: none;
}
.navbar-brand-center{
display: flex;
justify-content: center
}
.center-logo{
width: 75%;
}
.nav-item{
text-align: right;
width: 113%;
}
}
#media (min-width: 993px){
.navbar-brand-center{
display: none;
}
}
</style>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container">
<div class="center-logo">
<a class="navbar-brand-center" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mr-auto" style="
margin-right: 18%!important;
margin-left: 8%;
">
<li class="nav-item">
<a class="nav-link" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produk</a>
</li>
<li class="navbar-nav mr-auto">
<a class="navbar-brand" href="#">
<img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
</a>
</li>
<li class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
So I am relatively new to Web Development and am following Colt Steele's udemy course, I started doing this landing page but towards the end when I try to set the height of HTML to 100% and then there's like whitespace down. I have tried to search for a reason and I think my div container's height is causing some issues.
P.S: I also tried to make the HTML height auto which worked fine, but then again causes an issue in responsive mode, and even the navbar size decreases and doesn't cover to the end of the screen.
body{
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
}
html{
height: auto;
}
#content{
text-align: center;
padding: 25%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>
You need to add height: 100% to your body and html as well to make sure the body changes dynamically when window size changes.
My Chrome View
Live Demo: (Run snippet below and click full screen to see the image is cover in the page and there is no white space.)
Edit: Bootstrap has its own alot of native flex box classes which you can use instead of custom CSS. We can just use align-items-center and h-100 to make sure about content text stays in middle and good things it will be repsonsive as well. We do not need to use any Custom CSS padding or margin on content.
body {
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
height: 100%;
}
html {
height: 100%;
}
body {}
#content {
text-align: center;
color: white;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-12 mx-auto">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>
I have a simple main header which contains a navbar , I want to change the alignment of the right side of the image.
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Here is what I have :
as you can see there is space on the right side of header and left side, I want the image to float right side and remove that space on the right side, but left side should have that white space.
Here is what I want:
what am I missing in my code?
You can use edge offset values on the background-position property.
By using a negative value we can offset the image further towards the right of the page, giving you the effect you are looking for.
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: right -190px bottom;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
By adding a couple div
Added marketing-main-header_banner_image to hold the image that can be bigger than marketing-main-header_banner.
Added nav-holder to place the navbar-toggler button in the correct place.
html,
body {
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner {
overflow: hidden;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
.marketing-main-header_banner_image {
overflow: visible;
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 2000px;
}
.nav-holder {
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
width: 1700;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<div class="marketing-main-header_banner_image">
<div class="nav-holder">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
I am having trouble in displaying a background image in a static web page. Is is showing different height when I view on different LCD's, how can I make sure height is adjusted to approx 80% of the area, I even give percentage in Style for height but it didn't worked for me.
See this Image for Reference:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bakheet Japan</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<style>
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
width: 100%;
display: block;
width: auto;
height: 450px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#"><h3>Bakheet Japan</h3></a>
<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>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button"
href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="background-
image:url('css/arid-
barren-daylight-813873.jpg');">
<img class="img-fluid d-block mx-auto" height="230" width="240"
src="css/41435f27-bfd3-452a-b442-f8c4ca429a55.png" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan
2018</p>
</div>
</body>
</html>
Just added height to your <header> of 80vh (Viewport Height)
Which mean 80% of your screen height.
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
display: block;
height: 80vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#">
<h3>Bakheet Japan</h3>
</a>
<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>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');">
<img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan 2018
</p>
</div>
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor: pointer;
font-size: 16px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: dimgrey;
color: white;
text-align: center;
}
header.py-5 {
display: block;
height: 80vh;background-size: cover;
background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand " href="#">
<h3>Bakheet Japan</h3>
</a>
<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>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!--<div class="buttons">-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link button" href="index.html">
Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link button" href="Contactus.html">Contact</a>
</li>
</ul>
<!--</div>-->
</div>
</div>
</nav>
<header class="py-5 bg-image-full" style="">
<img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>
<div id="div1" class="container" style="height:150px;">
<h1>Welcome to Bakheet Japan</h1>
</div>
<div class="footer container">
<p class="m-0 text-center text-white">Copyright © Bakheet Japan 2018
</p>
</div>
I made slightly changes for not repeating the image
height: 80vh;
background-image: url('image_path');
background-size: cover;