Footer wont stick to bottom on mobile version - html

Hay.
When you open this page on mobile phone footer is not on the bottom of the page. When I open inspect on browser i see that tag goes on, not stopping on footer. I tried add HTML {height:100%;} and HTML {max-height:100%;} in CSS file but nothing happen. On the image you can see what is the problem. >This is only happening on this page, I have other pages on website and I don't have this problem.
Preview on mobile version
This is my code:
CSS
.map-container {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.map-container iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
.navigacija-link {
color: #dcfd50 !important;
font-weight: 700;
font-size: larger;
}
.navigacija-link:hover {
color: white !important;
font-weight: 700;
font-size: larger;
text-decoration: underline !important;
}
.navigacija-podlink {
color: #dcfd50 !important;
font-weight: 500;
font-size: large;
}
.navigacija-podlink:hover {
color: black !important;
font-weight: 500;
font-size: large;
text-decoration: underline !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vijest | TK Pazin</title>
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="background-color: #dcfd50;">
<nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #ba3631;">
<a class="navbar-brand" href="index.html">
<img src="img/logo.jpg" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navigacija-link" href="index.html">Novosti</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="pojedinacni-turniri.html">Pojedinačni turniri</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigacija-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rang liste
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #ba3631;">
<a class="dropdown-item navigacija-podlink" href="rang-liste/pojedinacni-turniri.html">Pojedinačni turniri</a>
<a class="dropdown-item navigacija-podlink" href="rang-liste/piramida.html">Piramida</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="o-klubu.html">O klubu</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="galerija.html">Galerija</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="kontakt.html">Kontakt</a>
</li>
</ul>
</div>
<span class="navbar-text">
<b style="font: italic bold 2vw Georgia, serif; color: whitesmoke;">TK Pazin</b>
</span>
</nav>
<div style="margin-bottom: 75px;"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/karosel/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Prethodni</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Sljedeći</span>
</a>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-4" style="margin-top: 25px; max-width: 184px;">Povratak na početnu stranicu</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="my-4" style="text-align:center; color: #ba3631;">Vijest</h1>
</div>
</div>
<div class="col-12 mb-4">
<div class="card h-100">
<img class="card-img-top" src="img/vijesti.jpg" alt="vijest">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<h6>Izrađeno: 5.5.2016.</h6>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Rezervacija terena: 098 434 133</small>
<br>
<small>Copyright © 2019 Tenis klub Pazin - Sva prava pridržana</small>
</div>
</footer>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>


Try this flex-direction: column; for body and margin-top: auto; for footer
.map-container {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
.map-container iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
.navigacija-link {
color: #dcfd50 !important;
font-weight: 700;
font-size: larger;
}
.navigacija-link:hover {
color: white !important;
font-weight: 700;
font-size: larger;
text-decoration: underline !important;
}
.navigacija-podlink {
color: #dcfd50 !important;
font-weight: 500;
font-size: large;
}
.navigacija-podlink:hover {
color: black !important;
font-weight: 500;
font-size: large;
text-decoration: underline !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vijest | TK Pazin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="background-color: #dcfd50;">
<nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #ba3631;">
<a class="navbar-brand" href="index.html">
<img src="img/logo.jpg" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navigacija-link" href="index.html">Novosti</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="pojedinacni-turniri.html">Pojedinačni turniri</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigacija-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rang liste
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #ba3631;">
<a class="dropdown-item navigacija-podlink" href="rang-liste/pojedinacni-turniri.html">Pojedinačni turniri</a>
<a class="dropdown-item navigacija-podlink" href="rang-liste/piramida.html">Piramida</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="o-klubu.html">O klubu</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="galerija.html">Galerija</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="kontakt.html">Kontakt</a>
</li>
</ul>
</div>
<span class="navbar-text">
<b style="font: italic bold 2vw Georgia, serif; color: whitesmoke;">TK Pazin</b>
</span>
</nav>
<div style="margin-bottom: 75px;"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/karosel/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Prethodni</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Sljedeći</span>
</a>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-4" style="margin-top: 25px; max-width: 184px;">Povratak na početnu stranicu</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="my-4" style="text-align:center; color: #ba3631;">Vijest</h1>
</div>
</div>
<div class="col-12 mb-4">
<div class="card h-100">
<img class="card-img-top" src="img/vijesti.jpg" alt="vijest">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<h6>Izrađeno: 5.5.2016.</h6>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Rezervacija terena: 098 434 133</small>
<br>
<small>Copyright © 2019 Tenis klub Pazin - Sva prava pridržana</small>
</div>
</footer>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>


Add this meta tag in your html file in head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Please add this code in css:
footer {
position: absolute;
bottom: 0;
width: 100%;
}

Related

Can't change the background color on carousel caption with BootStrap4

I'm stuck trying to change the background color of a simple carousel-caption.
When I check in the debugger I see the warning "Invalid property value" but I can't figure out why.
I'm wondering whether I missed something. I don't get why the property background with an rgba color would be invalid in a carousel-caption.
I've tried placing this property in the carousel-item but I got the same result.
Here's a link to the code on JsFiddle https://jsfiddle.net/qragpevL/
.html{
font-family: Poppins;
}
.carousel-item{
height: 80vh;
min-height: 300px;
background: no-repeat center scroll;
background-size: cover;
}
.carousel-caption{
margin-top: 20%;
margin-bottom: 20%;
background: rgba(black, black, black, 0.8);
}
.carousel-caption h5{
font-size: 45px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
color:black;
}
.carousel-caption p{
width: 75%;
margin: auto;
font-size: 18px;
line-height: 1.9;
color:black;
}
.navbar-light .navbar-brand{
color:black;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active
{
color: black;
}
.navbar-light .navbar-nav .nav-link{
color: black;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover{
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My SportTeam</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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 ml-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">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Slider One Item</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Slider Two Item</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Slider Three Item</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Because you are providing invalid values for the rgba colour scheme. Having rgba(black,black, black, 0.8); won't really work. Try setting it as: rgba(0, 0, 0); if you want it black.
Here's a link to a css color picker tool, provided by Mozilla.

Background image height being cropped at lower resolution views

Good day to you!
I know that this is a common problem and have been solved many times but really I've tried every search solutions that search engine and stackoverflow returns to me but I really can't fix this one.
The problem is that the background image is cropped when the view is in smaller device.
I have tried setting the html and the body to 100% to no avail.
I have tried setting the background-size to 100% 100% to no avail.
I have tried this link CSS: Full Size background image but still to no avail.
Here's the css code:
body {
background-image: url(../img/bg2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
and here's the body of the html code:
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
< logo
</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 ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/w1.jpg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w2.jpg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w3.jpg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/2.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/3.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
finally the output:

Try using a min-height so it will not crop from the bottom of the background image. Check the sample code given below. I have given min-height:745px in the body css tag.
body {
background-image: url(https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
min-height: 725px;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
</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 ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>

You can use the object-fit property (with growing support) to have the image resize in its container. Example below:
.banner-image {
overflow: hidden;
object-fit: contain;
height: 100%;
width: 100%;
max-height: 460px;
}

The solution I found out for this is removing the 100% set height for both the body and the html. The background displays fine in the mobile view but on tablet devices, the background image will scale on the content inside the body as long as you have a high resolution background image (e.g. 6k x 4K reso).

CSS Image re align,different lcd/screen

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;

Bootstrap 4 Navigation Bar Dropdown Issue

I tried to split this navigation bar dropdown menu in to two columns but they clash with each other.
And the other issue is, the Search bar stays at bottom when in mobile. And page is not responsive. I don't know if this is caused by navigation bar issue. Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #C0C0C0;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test Test Test</a>
<a class="dropdown-item" href="#">Test Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">itemitemitemitem</a>
<a class="dropdown-item" href="#">itemitemitemitemitem</a>
<a class="dropdown-item" href="#">item</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

I'll answer the dropdown question that goes along with the title.
You don't want to nest a container inside of the dropdown. Also increase the min-width on the dropdown to fit the content.
https://www.codeply.com/go/9wUCwUErKL
<div class="dropdown-menu" style="min-width:360px" aria-labelledby="navbarDropdown">
<div class="row no-gutters">
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">Test Test Test</a>
<a class="dropdown-item px-2" href="#">Test Test</a>
<a class="dropdown-item px-2" href="#">Test</a>
</div>
<div class="col-sm-6">
<a class="dropdown-item px-2" href="#">itemitemitemitem</a>
<a class="dropdown-item px-2" href="#">itemitemitemitemitem</a>
<a class="dropdown-item px-2" href="#">item</a>
</div>
</div>
</div>
There is no longer col-xs-* in Bootstrap 4, it's just col-*.

Bootstrap 4 Navbar position

I am trying to make a navbar that hovers on top of 2 other items and then when it goes to mobile size I would like it to collapse but put the mobile icon at the top right of the screen like so:
I have no idea how to get it to hover on top of the two other items, I have tried to fiddle with z-index and offsets but I can't get it to sit right in the center of the two without white spaces on the side.
JsFiddle
#mu-carousel .carousel-item {
max-height: 480px;
}
#mu-header {
background: lightgrey;
height: 135px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header id="mu-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<span>LOGO/NAME</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<section id="mu-carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.js"></script>
</body>

In this case, you just add style="margin-top: -28px;" to the navbar container (28px is half of the navbar height) and then add style="margin-top: -28px;" to the carousel container as well.
Finally, add the sticky-top to the navbar container.
To make it work for small screens the way it's shown in your picture, the navbar toggler has to be taken out of the navbar. I put it into a column located after the logo column in the HTML. (I've also given the toggle a background color to make it visible.)
The classes d-flex justify-content-end make the toggler right aligned and the class d-md-none makes sure that the toggler disappears on larger screens.
And since the navbar on small screens is only 16px tall (because the toggler was taken out) we need a custom class to control the negative top margin for small screens and for larger screens like so:
.mpush {
margin-top: -8px;
}
#media (min-width: 768px) {
.mpush {
margin-top: -28px;
}
}
Here's the complete working snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.mpush {
margin-top: -8px;
}
#media (min-width: 768px) {
.mpush {
margin-top: -28px;
}
}
</style>
<header id="mu-header" style="height: 135px; background: lightgrey;">
<div class="container">
<div class="row">
<div class="col-8 col-md-6">
<span>LOGO/NAME</span>
</div>
<div class="col-4 d-flex d-md-none justify-content-end">
<button class="navbar-toggler navbar-toggler-right2 bg-warning" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
<div class="col-md-2">
<span>TEXT</span>
</div>
</div>
</div>
</header>
<div class="container bg-warning sticky-top mpush">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<section id="mu-carousel" class="mpush">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<p style="padding-top: 999px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti facilis corrupti dolores vero eaque, placeat saepe velit a officiis inventore itaque ipsa, temporibus. Est sint voluptatem natus veritatis in.</p>