Webpage navigation bar
When I click "HOME" on my Navbar, it shows this, with a little white space underneath:
However, I want it to show the full display at the top, without the white space under, like this:
How can I fix this issue? Please modify my code to get the desired result and add the modified code in the answer. Here is my html and CSS code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="icon.png" <!--="" required="" meta="" tags="" --="">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<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">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="../dist/aos.css">
<title>Maisha Aniqa</title>
<!-- //Styling of the Webpage -->
<style type="text/css">
body{
margin-top: 55px;
}
.jumbotron {
background-image: url("background.jpeg");
text-align: center;
height:510px;
/*margin-top:20px;*/
}
@media screen and (max-width: 650px)
.jumbotron p {
font-size: 0.7em;
}
.jumbotron2 {
margin-top: 30px;
margin-left: 80px;
margin-right: 80px;
text-align: center;
height:300px;
}
.jumbotron3{
text-align: center;
margin-top: 2px;
}
.centered {
justify-content: center;
align: center;
display: block; margin-left: auto; margin-right: auto;
}
.display-5 {
font-size: 40px;
text-align: center;
}
.display-6 {
margin-top: 85px;
text-align: center;
}
.display-1 {
color: white;
}
.title1 {
text-align: center;
}
.title {
text-align: center;
}
.text-center {
text-align: center;
}
.changeColour{
-webkit-animation: color-change 4s infinite;
-moz-animation: color-change 4s infinite;
-o-animation: color-change 4s infinite;
-ms-animation: color-change 4s infinite;
animation: color-change 4s infinite;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar-example" data-offset="120" data-aos-easing="ease" data-aos-duration="800" data-aos-delay="0">
<nav style=" " class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">EXPERTISE</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- //SECTION FOR PAGE TOP -->
<section id="page-top"></section>
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font-size: 120px; color: white; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate" id="nametagneel">Maisha Aniqa</p>
<p data-aos="zoom-out" data-aos-delay="500" style="color:white;animation-duration:2s;animation-iteration-count:infinite;animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate">Aspiring Developer.<br>An Engineering student.</p>
<!-- <p class="lead"></p>
<p class="lead"></p> -->
</div>
<!-- //SECTION ABOUT ME -->
<section id="about">
<hr class="my-2"><br>
<div id="container">
<br><h1 class="animated fadeIn delay-1s display-5">About Me</h1>
<div class="row">
<div class="animated fadeInUp delay-3s">
<div class="jumbotron2">
<p class="lead" style="text-align:justify"><br>I am currently a second year Electrical Engineering major at <strong class="changeColour">Ryerson University</strong>. I am extremely passionate about modern technologies and innovations that are poised to shape the way we live in future. I aspire to learn new skills everyday and apply my knowledge to solve real world problems in creative ways. My areas of interest include machine learning, full-stack development, cloud computing, and advanced computer networks. I am also a software controls team member of several engineering design teams at Ryerson, specializing in robotics, autonomous systems, and space technology. </p>
</div>
</div>
</div>
</div>
<p></p>
</section>
</body>
</html>
Solution
My suggestion
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="icon.png" <!--="" required="" meta="" tags="" --="">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="../dist/aos.css">
<title>Maisha Aniqa</title>
<!-- //Styling of the Webpage -->
<style type="text/css">
body{
margin-top: 55px;
}
.jumbotron {
background-image: url("background.jpeg");
text-align: center;
height:510px;
/*margin-top:20px;*/
margin-bottom: 0px;
}
@media screen and (max-width: 650px)
.jumbotron p {
font-size: 0.7em;
}
.jumbotron2 {
margin-top: 30px;
margin-left: 80px;
margin-right: 80px;
text-align: center;
height:300px;
}
.jumbotron3{
text-align: center;
margin-top: 2px;
}
.centered {
justify-content: center;
align: center;
display: block; margin-left: auto; margin-right: auto;
}
.display-5 {
font-size: 40px;
text-align: center;
}
.display-6 {
margin-top: 85px;
text-align: center;
}
.display-1 {
color: white;
}
.title1 {
text-align: center;
}
.title {
text-align: center;
}
.text-center {
text-align: center;
}
.changeColour{
-webkit-animation: color-change 4s infinite;
-moz-animation: color-change 4s infinite;
-o-animation: color-change 4s infinite;
-ms-animation: color-change 4s infinite;
animation: color-change 4s infinite;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar-example" data-offset="120" data-aos-easing="ease" data-aos-duration="800" data-aos-delay="0">
<nav style=" " class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">EXPERTISE</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- //SECTION FOR PAGE TOP -->
<section id="page-top"></section>
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font-size: 120px; color: white; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate" id="nametagneel">Maisha Aniqa</p>
<p data-aos="zoom-out" data-aos-delay="500" style="color:white;animation-duration:2s;animation-iteration-count:infinite;animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate">Aspiring Developer.<br>An Engineering student.</p>
<!-- <p class="lead"></p>
<p class="lead"></p> -->
</div>
<!-- //SECTION ABOUT ME -->
<section id="about">
<hr class="my-2"><br>
<div id="container">
<br><h1 class="animated fadeIn delay-1s display-5">About Me</h1>
<div class="row">
<div class="animated fadeInUp delay-3s">
<div class="jumbotron2">
<p class="lead" style="text-align:justify"><br>I am currently a second year Electrical Engineering major at <strong class="changeColour">Ryerson University</strong>. I am extremely passionate about modern technologies and innovations that are poised to shape the way we live in future. I aspire to learn new skills everyday and apply my knowledge to solve real world problems in creative ways. My areas of interest include machine learning, full-stack development, cloud computing, and advanced computer networks. I am also a software controls team member of several engineering design teams at Ryerson, specializing in robotics, autonomous systems, and space technology. </p>
</div>
</div>
</div>
</div>
<p></p>
</section>
</body>
</html>
just add "margin-bottom: 0px" in line 30 to override the origin style "mragin-bottom: 2rem"
- Chrome OffscreenCanvas custom fonts
- Make YouTube embed (Playlist) load faster
- Programmatically change the src of an img tag
- Rounded borders that look like the image attached
- How to comment/uncomment in HTML code
- Pop-up message when site it accessed on mobile device
- A Google Apps Script mobile web app with configured HTML viewport is not displayed correctly
- Jquery Selector for Radio Inputs that are Required, But One Radio is Checked
- Adding rating star in JavaScript e-commerce website
- Jquery multi select dropdown with checkbox
- Scrollbar Appears on kableExtra Tables with Download Button in Quarto — How to Remove?
- Mobile Site editing
- Using aria-sort in validated HTML5
- Why doesn't the third grid row expand to fit its overflowing content when using `minmax(100px, 1fr)` in CSS Grid?
- How to load up CSS files using Javascript?
- Why are the last two grid rows only 27px high when using `grid-template-rows: repeat(auto-fit, minmax(100px, 1fr))`?
- outlook for android "no app installed to open this", but it's just a link
- CSS strikethrough different color from text?
- How to get transaction information from PayPal donation?
- JavaScript / CSS / DOM - dynamic class value overwrite, concatenation problem/challenge
- Prevent users from pasting images into contenteditable-div
- DatePicker not working inside a modal
- How to access the data from data* attribute using JavaScript?
- HTML Select Option, text formatting
- TailwindCSS with DaisyUI has problems with bg-gradient-to-r from-primary to-secondary
- How to use preg_replace for replacing href attribute values with a Javascript function name in a PHP string
- How can I add "href" attribute to a link dynamically using JavaScript?
- how to make html <a target='_parent'> point to the same as javascript window.opener?
- Using gradient on div border with rounded corners
- Read JSON from from HTML file input