My html page is not scrolling in browsers
remove overflow: hidden; from body in the bootstrap-theme.css file.
Html Page not Scrolling Down? CSS
As you said, overflow: hidden causes this problem. Instead use
overflow-x: hidden;
to disable only the horizontal scrolling.
DEMO
You have the ability to control both, the vertical and horizontal scrolling, using the x and y axis.
.......|.......
.......y.......
.......|.......
–––––––––––x–––
.......|.......
.......|.......
.......|.......
You can target both individually using overflow-x, and overflow-y, or both at the same time using overflow. The values you can set are:
auto;
scroll;
visible;
hidden;
initial;
inherit;
no-display;
no-content;
Read more about it at w3schools
My page is not scrolling even after applying all the methods I could find on web
You really don't need JavaScript for this , you can add one id in footer and simply call it on click of contact button as follow.
body {
background-image: url(../images/images/documentbackground.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/*-------------------------------------Main head------------------------------------------- */
.jumbotron {
margin: 0;
background: url(../images/a2.jpg) no-repeat;
}
.mainHead a {
display: block;
width: 7%;
color: white;
background-color: #3BF44F;
text-decoration: none;
transition: background-color .7s;
}
.mainHead a:hover {
background-color: #08B81B;
}
/*-----------------------------------------------------NavBar--------------------------------------*/
.navbar {}
ul {
list-style: none;
}
li {
float: left;
}
.navbar a {
color: white;
padding: 0 75px;
text-decoration: none;
transition: background-color 0.7s;
}
.navbar a:hover {
background-color: #0bbc08;
color: white;
}
/*----------------------------------------------------------Login------------------------------------*/
.login {
height: 200px;
background: url(../images/images/back1.jpg);
background-size: cover;
background-position: 0 -45%;
/*transition: all 1s;*/
}
/*.login:hover{
transition: all 1s;
background-size: 150%;
}*/
.login h3 {
text-align: center;
color: white;
margin-top: 2%;
}
.login .question {
position: relative;
width: 50%;
margin: 0 auto;
}
.login .question input {
width: 100%;
}
.login .button {
position: absolute;
left: 50%;
}
/*----------------------------------------Menu--------------------------------------------------*/
.menu {
overflow: hidden;
text-align: center;
background: url(../images/how.jpg);
}
.menu button {
transition: all .5s;
}
.menu .graduated:hover {
transform: scale(1.1);
}
.menu .interview:hover {
transform: scale(1.1);
}
.menu .tenthpass:hover {
transform: scale(1.1);
}
.menu .questions:hover {
transform: scale(1.1);
}
.menu .twpass:hover {
transform: scale(1.1);
}
.menu .register:hover {
transform: scale(1.1);
}
/*-------------------------------------------CareerCounsellor---------------------------------------*/
.careerCounselor {
text-align: center;
background: url(../images/a6.jpg);
background-size: cover;
}
.careerCounselor .heading,
.careerCounselor .examples {
color: white;
font-size: 30px;
}
.careerCounselor .row1 img {
width: 55%;
height: 25%;
margin-bottom: 3px;
border-radius: 3px;
}
.careerCounselor .name {
color: white;
}
.careerCounselor .post {
color: #cbbf5a;
}
.careerCounselor .exp {
color: white;
}
/*-----------------------------------------------Examples------------------------------------------*/
/*-------------------------------------------questionGuide---------------------------------------*/
.questionGuide {
text-align: center;
background: url(../images/a2.jpg);
}
/*-------------------------------------------Videos---------------------------------------*/
/*-------------------------------------------Footer---------------------------------------*/
.footer {
background-color: #91FB9D;
text-align: center;
}
.footernav {
width: 100%;
}
.footer .row {
padding: 1% 10% 0 10%;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<link rel="stylesheet" type="text/css" href="homePagecss.css">
<title>Career Guide</title>
</head>
<body>
<div class="container">
<ul class="m-0 p-0 bg-success navbar">
<li class="p-1"><a href="about.html">About</a></li>
<li class="p-1"><a href="#">Interview</a></li>
<li class="p-1"><a href="#">Registration</a></li>
<li class="p-1"><a href="#">Terms</a></li>
<li class="p-1" id="contact"><a href="#footer">Contact</a></li>
</ul>
<div class="login pt-2">
<h3 class="mt-3">Your Career Is Your Life</h3>
<div class="mt-4 question">
<input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
<button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
</div>
</div>
<div class="menu container">
<div class="menuHeading">
<h3 class="mt-3">How to choose your career</h3>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 register">Register</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 interview">Interview</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 questions">Questions</button>
</div>
</div>
</div>
<div class="examples p-2 mt-3 font-weight-bold">HOW CAREER GUIDE CHANGING THE LIVES</div>
<div class="row" style="display: flex;">
<div class="col-sm">
<p class="">Career Guidence made course choice simple and easy. I am happy i could make it to IIM-Indore</p>
<img src="../images/a.jpg">
</div>
<div class="col-sm ">
<p class="">Career guidence towards food technology made mahima an example for her friends they can now look beyond the medicine</p>
<img src="../images/b.jpg">
</div>
<div class="col-sm ">
<p class=""> Me and my dad found selection of stream after 10th very scientific and efficient Thenks to CareerGuide</p>
<img src="../images/c.jpg" style="height: 60%;">
</div>
</div>
</div>
<div class="row row2 w-100 p-3 mt-4 container">
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/yIW6eTU2oXY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/FTiKWY2AbEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/R7iN71uJcG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="footer" class="footer pt-3 rounded">
<div class="footernav">
<a href="about.html"><button type="button" class="btn btn-success btn-outline-light mr-3">About</button></a>
<a href="#"><button type="button" class="btn btn-success btn-outline-light mr-3">Contact Us</button></a>
<a href="#"><button type="button" class="btn btn-success btn-outline-light mr-3">Terms and Conditions</button></a>
<a href="Login.html"><button type="button" class="btn btn-success btn-outline-light mr-3">Login</button></a>
<a href="#"><button type="button" class="btn btn-success btn-outline-light mr-3">Registration</button></a>
</div>
<div class="phone mt-3">
<img src="../images/phone.png" width="20px" height="20px">
<p class="d-inline-block">+919610085083</p>
</div>
<div class="links">
<a href="#"><img src="../images/twitter.png" width="20px" height="20px" class="mr-1" ></a>
<a href="#"><img src="../images/g+.png" width="20px" height="20px" class="mr-1" ></a>
<a href="#"><img src="../images/facebook.png" width="20px" height="20px" class="mr-1" ></a>
<a href="#"><img src="../images/img2.png" width="20px" height="20px" class="mr-1" ></a>
</div>
<div class="row">
<div class="col-sm">
<p>1105<br>Career Experts</p>
</div>
<div class="col-sm">
<p>551<br>Career Topics</p>
</div>
<div class="col-sm">
<p>1199<br>Career Questions</p>
</div>
<div class="col-sm">
<p>345,123<br>Students Impacted</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="homePage.js"></script>
<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>Bootstrap page not scrollable
I'have checked your codes.
Please remove body{overflow:hidden} in CSS and also remove footer postion:fixed
Like us,
body {
overflow: auto;
}
footer{
position:static;
}
Related Topics
How to Cut a Circular Part from an Image
Remove ':Hover' CSS Behavior from Element
How to Margin the Body of the Page (Html)
Fixed Positioned Header Persists on Desktop But Not on Mobile
Put Icon Inside Input Element in a Form (Not as Background Image!)
How to Change the Color of an Image on Hover
100% Height Div Between Header and Footer
Animating a CSS Gradient Background on the Hover Event
How to Draw a Rounded Rectangle Using HTML Canvas
How Remove Border Around Image in CSS
A Library to Convert Ansi Escapes (Terminal Formatting/Color Codes) to HTML
Making 'File' Input Element Mandatory (Required)
CSS Font Size Using Em Different on Different Pages
Rectangles Instead of Whitespace in Chrome
Responsive Height Proportional to Width
Absolutely Positioned Div on Right Causing Scrollbar When the Left Doesn'T