Trying to get my page to scroll up and down however, the current css will not wo
ID: 3720532 • Letter: T
Question
Trying to get my page to scroll up and down however, the current css will not work. Please identify the issue.
----------------------------------------------------------
<!DOCTYPE html>
<html>
<title>R.O.P.E</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="#" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Home</a>
<a href="about.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">About</a>
<a href="events.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Events</a>
<a href="training.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Training</a>
<a href="contact.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Contact Us</a>
<a href="volunteering.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Volunteering</a>
<a href="blog.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Blog</a>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
width: 100%;
height: 100%;
overflow: auto;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Welcome to R.O.P.E! If you're looking to lend a helping hand to your local New Brunswick community then you've come to right place. </h3>
<img src="helpinghand.png" class="img-responsive img-circle margin" alt="" width="400" height="200">
<h3><ol> Rope stands for: </ol></h3>
<h3> <ol> Reaching </ol> </h3>
<h3> <ol> Our </ol> </h3>
<h3> <ol> Potential </ol> </h3>
<h3> <ol> Early </ol> </h3>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">Our Mission</h3>
<img src="people.jpg" class="img-responsive img-circle margin" alt="" width="400" height="400">
<h3><p> To help connect people of all ages with mentorship and volunteer opportunities in the New Brunswick, NJ area. We believe that by doing this, relationships will expand, and members of the community will work together as a cohesive unit. </p></h3>
<div class="container-fluid bg-3 text-center">
<h3 class="margin">A community we all need to be a part of</h3>
<img src="community.jpg" class="img-responsive img-circle margin" alt="" width="600" height="400">
<h3><p> Take time to browse our site. Lets build a community that we all want to be a part of! </p></h3>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>How will you make a difference? Join our team by visiting our <a href="contact.html">Contact Page</a></p>
</footer>
</body>
</html>
Explanation / Answer
Existing code:
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
width: 100%;
height: 100%;
overflow: auto;
}
Hi guys change the attributes value of width, height and overflow for the class name "navbar".
The overflow property only works for block elements with a specified height.
New Code:
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
width: auto;
height: 600px;
overflow: scroll;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.