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
Related
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<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="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
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.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Hello there!</h1>
<h3>My name is James McGill and I'm a front-end web developer.</h3>
</div>
</section>
<div class="wrapper">
<h1>My skills</h1>
<br><br>
<h2>HTML</h2>
<div>90%</div>
<h2>CSS</h2>
<div>70%</div>
<h2>Javascript</h2>
<div>60%</div>
<h2>jQuery</h2>
<div>55%</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover; /*This makes the image cover the whole page space*/
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.intro {
height: 100%;
width: 100%;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
.content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
Hey guys,
if you view my site on your browser you will see that as you scroll down the 'h1' which says "My skills" is located just before the start of the next page.
https://codepen.io/JamesMcGill/pen/KGNEWd On codepen it's even worse.
I am having a difficult time trying to figure out why this is happening.
Well, technically it is not on the same page. However, it does appear within the same background image as the contents on the main welcoming page.
Please, give me some suggestions on how I might be able to address this issue.
Thank you..
You applied the background-image to the body element, which will cause it to fill the screen. If you want it to only cover the first section, you should apply the background-image rule to that specific section.
It is doubling up at the bottom because background-repeat: repeat is the default and you have not declared an alternative. If you want if to fill the screen, you can add background-size: cover, or simply add background-repeat: no-repeat to prevent the doubling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
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'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>