I am trying to get scroll-behavior to work on this site. I have put the scroll-container, put ids, fixed css, but it is just not working. Any ideas as to why smooth-scrolling is NOT working on this?
What I need is the navbar area smooth scroll to the appropriate areas on the page. So Menu to Menu, Deals to Deals, About to About etc...I can't figure out why the smooth scrolling isn't working. Any ideas? Thanks!
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
