I'm pretty new to html and css and am designing a mock portfolio for a course I'm taking. It's a single-page portfolio and we were given the instruction that each section must be 100% height specifically. This broke my sticky navigation, but after some research I found a tip that adding the below code would allow for the 100% height requirement and allow my sticky nav to work:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
That was indeed the case, but after testing a bit more, I realized the html overflow-hidden portion of that css broke my #top navigation in the navbar. All other navigation works as it should.
Here is my markup:
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 16px;
}
html,
body {
height: 100%;
scroll-behavior: smooth;
}
/* END RESET */
/* BELOW CODE ALLOWS STICKY NAV TO ALWAYS BE VISIBLE WITHOUT SETTING A SPECIFIC HEIGHT */
html {
overflow: hidden;
}
body {
overflow: scroll;
}
/* SETTING DEFAULT HEIGHT, WIDTH, FONT-FAMILY, AND DISPLAY PROPERTY ON ALL SECTIONS */
section {
width: 100%;
height: 100%;
display: flex;
font-family: finalsix;
}
/* STICKY NAVBAR CONTAINER */
.navBar {
height: 60px;
position: sticky;
top: 0;
align-items: center;
justify-content: space-between;
background-color: #fff;
color: #707070;
}
/* WORDMARK IN NAVBAR */
.navBar .wordmark {
padding-left: 60px;
font-size: 28px;
}
/* ANCHOR LINKS IN NAVBAR */
.navBar .navLinks a {
padding-right: 60px;
font-size: 20px;
text-decoration: none;
color: #707070;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crescent Devworks</title>
<!-- FAVICON -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- NAVIGATION -->
<section class="navBar">
<div class="wordmark">crescent devworks</div>
<div class="navLinks">
<a href="#top">home</a>
<a href="#about">about me</a>
<a href="#projects">my work</a>
<a href="#contact">contact</a>
</div>
</section>
<!-- HERO -->
<section class="hero">
<div class="logo"></div>
<div class="tagline">
<h1>crescent devworks</h1>
<p>web development tailored to your needs</p>
</div>
</section>
<!-- ABOUT -->
<section class="about" id="about">
<div class="memoji">
<h1 class="sectionTitle">about me</h1>
<div class="memojiImg"></div>
</div>
<div class="textContainer"></div>
</section>
<!-- PROJECTS -->
<section class="projects" id="projects">
<div class="project"></div>
<div class="memoji">
<h1 class="sectionTitle">my work</h1>
<div class="memojiImg"></div>
</div>
<div class="project"></div>
</section>
<!-- CONTACT -->
<section class="contact" id="contact">
<div class="contactForm"></div>
<div class="memoji">
<h1 class="sectionTitle">contact</h1>
<div class="memojiImg"></div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="copyright">© crescent devworks</div>
</footer>
</body>
</html>To emphasize, section heights have to be 100%. Oh - and no JS... haven't crossed that line just yet.
Lastly, if you have a solution, can you explain why it works? I genuinely want to learn so I'm not just looking to have someone give me code I don't understand. I really appreciate it!
<a href="#top">home</a>
All your other links are targeting elements in your page via their ID, but this one uses the "magic" #top - which usually works (although I can't tell right now, if only "by convention", or if that is actually specified anywhere), but apparently somehow stops working as usual here.
Explicitly target an element with this one as well, then it should work.
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 16px;
}
html,
body {
height: 100%;
scroll-behavior: smooth;
}
/* END RESET */
/* BELOW CODE ALLOWS STICKY NAV TO ALWAYS BE VISIBLE WITHOUT SETTING A SPECIFIC HEIGHT */
html {
overflow: hidden;
}
body {
overflow: scroll;
}
/* SETTING DEFAULT HEIGHT, WIDTH, FONT-FAMILY, AND DISPLAY PROPERTY ON ALL SECTIONS */
section {
width: 100%;
height: 100%;
display: flex;
font-family: finalsix;
}
/* STICKY NAVBAR CONTAINER */
.navBar {
height: 60px;
position: sticky;
top: 0;
align-items: center;
justify-content: space-between;
background-color: #fff;
color: #707070;
}
/* WORDMARK IN NAVBAR */
.navBar .wordmark {
padding-left: 60px;
font-size: 28px;
}
/* ANCHOR LINKS IN NAVBAR */
.navBar .navLinks a {
padding-right: 60px;
font-size: 20px;
text-decoration: none;
color: #707070;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crescent Devworks</title>
<!-- FAVICON -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- NAVIGATION -->
<section class="navBar">
<div class="wordmark">crescent devworks</div>
<div class="navLinks">
<a href="#home">home</a>
<a href="#about">about me</a>
<a href="#projects">my work</a>
<a href="#contact">contact</a>
</div>
</section>
<!-- HERO -->
<section class="hero" id="home">
<div class="logo"></div>
<div class="tagline">
<h1>crescent devworks</h1>
<p>web development tailored to your needs</p>
</div>
</section>
<!-- ABOUT -->
<section class="about" id="about">
<div class="memoji">
<h1 class="sectionTitle">about me</h1>
<div class="memojiImg"></div>
</div>
<div class="textContainer"></div>
</section>
<!-- PROJECTS -->
<section class="projects" id="projects">
<div class="project"></div>
<div class="memoji">
<h1 class="sectionTitle">my work</h1>
<div class="memojiImg"></div>
</div>
<div class="project"></div>
</section>
<!-- CONTACT -->
<section class="contact" id="contact">
<div class="contactForm"></div>
<div class="memoji">
<h1 class="sectionTitle">contact</h1>
<div class="memojiImg"></div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="copyright">© crescent devworks</div>
</footer>
</body>
</html>