I'm creating a portfolio website, and I'm trying to keep my scroll-bars hidden so it looks professional. However, none of the solutions I've found online, such as .element::-webkit-scrollbar { width: 0 !important }, seamless="seamless", or any of the overflow: hidden variations (which is unusable anyway due to the fact that I would like to still be able to scroll), seem to work.
I'm not sure which part of my HTML I should include, so here's all of it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='css/fonts.css' rel="stylesheet" type="text/css">
<link href='css/font-awesome.min.css' rel="stylesheet" type="text/css">
<link href='css/normalize.css' rel="stylesheet" type="text/css">
<link href='css/style.css' rel="stylesheet" type="text/css">
<link rel="icon" href="img/Logo.ico">
<title>*my name*</title>
</head>
<body>
<nav class="fixed-nav-bar">
<ul id="left-align-menubar">
<li class="nav-button"><a href="#main" class="nav-button-link">*my name*</a></li>
</ul>
<ul id="right-align-menubar">
<li class="nav-button"><a href="#math-showcase" class="nav-button-link">Math Work</a></li>
<li class="nav-button"><a href="#lang-showcase" class="nav-button-link">Language Work</a></li>
<li class="nav-button"><a href="#tech-showcase" class="nav-button-link">Tech Work</a></li>
<li class="nav-button"><a href="#art-showcase" class="nav-button-link">Art Pieces</a></li>
<li class="nav-button"><a href="#sci-showcase" class="nav-button-link">Science Work</a></li>
<li class="nav-button"><a href="#pro-showcase" class="nav-button-link">Professional Work</a></li>
</ul>
</nav>
<div class="main-content" id="main">
<div align="center" class="main-title">
<h1>*my name*</h1></div>
<div class="container showcase-div" id="math-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="math"><h2>Mathematics Work <span id="math-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="math-dropdown">
<div>
<a href="" class="overlay-show" id="kiteheight">
<p>Kite Height Report</p>
</a>
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="lang-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="lang"><h2>Language Work <span id="lang-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="lang-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="tech-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="tech"><h2>Technological Work <span id="tech-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="tech-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="art-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="art"><h2>Artistic Pieces <span id="art-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="art-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="sci-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="sci"><h2>Science Work <span id="sci-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="sci-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="pro-showcase">
<img src="img/Math.jpg">
<a href="" class="showcase-collapse" id="pro"><h2>Professional Work <span id="pro-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2></a>
<div class="showcase-dropdown" id="pro-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
</div>
<div class="overlay">
<span class="fa fa-close fa-2x" id="overlay-close"></span></a>
</div>
<footer>
© *my name*. All rights reserved. This website was built from the ground up by *my name* to showcase his portfolio. The website itself is part of the portfolio.
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Here's the CSS I use, including the solutions that have currently been suggested to me:
/*********************************
TEXT STYLING
*********************************/
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
margin: 0;
padding: 2%;
}
.main-title {
font-size: 2em;
font-family: 'voltaire';
margin-top: 50px;
}
a, a:before, a:after {
text-decoration: none;
color: black;
}
h2 {
text-align: center;
}
/*********************************
NAV BAR STYLING
*********************************/
.nav-button:hover {
background-color: rgb(217, 217, 217);
height: 50px;
margin-top: 0;
}
.nav-button {
list-style: none;
display: inline-block;
}
.nav-button-link {
display: inline-block;
padding: 15px;
height: 20px;
}
#right-align-menubar {
top: 0;
right: 0;
display: inline-block;
position: absolute;
margin: 0;
vertical-align: middle;
}
#left-align-menubar {
top: 0;
left: 0;
display: inline-block;
position: absolute;
margin: 0;
vertical-align: middle;
padding-left: 0px;
}
.fixed-nav-bar {
font-weight: 500;
font-size: 1em;
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: white;
z-index: 100;
}
/*********************************
BODY STYLING
*********************************/
body {
margin: 0;
font-family: 'nerislight';
background-color: white;
color: black;
}
footer {
background-color: black;
color: white;
padding: 10px;
}
/*********************************
SHOWCASE AND OVERLAY STYLING
*********************************/
.showcase-div img {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.showcase-div {
position: relative;
}
.showcase-dropdown {
background-color: black;
display: none;
}
.showcase-dropdown div {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
.overlay-show p {
font-size: 1.25em;
color: white;
padding: 10px 0;
margin: 0;
}
#overlay-close {
position: fixed;
top: 10px;
right: 10px;
color: black;
z-index: 200;
}
.overlay {
display: none;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
overflow-y: scroll;
width: 100%;
padding: 0;
}
.document-embed {
height: 100%;
width: 100%;
}
.document p {
color: black;
margin: 0;
padding: 10px;
}
/*********************************
MISCELLANEOUS STYLING
*********************************/
body {
overflow: hidden;
}
/*********************************
ANIMATIONS
*********************************/
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
to {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
@-webkit-keyframes rotateBack {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
@keyframes rotateBack {
from {
transform: rotate(90deg);
}
to {
transform: rotate(0deg);
}
}
Here's my JavaScript with the part that gets broken due to overflow: hidden:
$('#main').animate({
scrollTop: target.offset().top - 50
}, 1000);
Normally, that has html, body rather than #main, but this was suggested to me and I would like to know why that does not work and what my error is.
It's also probably worth mentioning that this website is not even close to done and any suggestions you may have about improving code are welcome. Also, I do know that there are many other questions almost exactly like this one all over everywhere, but as I said, none of the answered my question. Thank you in advance!
