rowlandsfc

my footer wont go right to the bottom, it is at the bottom but there is a gap between the bottom and the footer <!-- Footer --> <footer id="footer" class="section footer"> <div class="container"> <div class="footer-container"> <div class="footer-center"> <h3>EXTRAS</h3> <a href="#">Gift Certificates</a> <a href="#">Affiliate</a> <a href="#">Specials</a> <a href="#">Site Map</a> </div> <div class="footer-center"> <h3>INFORMATION</h3> <a href="#">About Us</a> <a href="#">Privacy Policy</a> <a href="#">Terms & Conditions</a> <a href="#">Contact Us</a> <a href="#">Site Map</a> </div> <div class="footer-center"> <h3>MY ACCOUNT</h3> <a href="#">My Account</a> <a href="#">Order History</a> <a href="#">Wish List</a> <a href="#">Newsletter</a> <a href="#">Returns</a> </div> <div class="footer-center"> <h3>CONTACT US</h3> <div> <span> <i class="fas fa-map-marker-alt"></i> </span> 40 Heol-Frenhines Bridgend CF314RN Wales </div> <div> <span> <i class="far fa-envelope"></i> </span> bubbleandbalm@gmail.com </div> <div> <span> <i class="fas fa-phone"></i> </span> 01656 352 452 </div> </div> <div class="footer-center"> <div class="payment-methods"> <img src="images2/payment-methods.png" alt=""> </div> </div> </div> </div> </footer> footer css /* FOOTER */ .footer { background-color: var(--black); padding: 6rem 1rem; line-height: 3rem; } .footer-center span { margin-right: 1rem; } .footer-container { display: grid; grid-template-columns: repeat(5, 1fr); color: var(--white); } .footer-center a:link, .footer-center a:visited { display: block; color: #f1f1f1; font-size: 1.4rem; transition: 0.6s; } .footer-center a:hover { color: var(--primary); } .footer-center div { color: #f1f1f1; font-size: 1.4rem; } .footer-center h3 { font-size: 1.8rem; font-weight: 400; margin-bottom: 1rem; } .footer .payment-methods { margin-top: 2rem; } @media only screen and (max-width: 998px) { .footer-container { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } } @media only screen and (max-width: 768px) { .footer-container { grid-template-columns: 1fr; row-gap: 2rem; }

i have created a basic website that is responsive including the nave bar that takes the links shows and hides then using a button on smaller screen, my issue is that it doesnt work unless i click on the website title then it will start working but as soon as i go to another page it stops working until i click the title again navbar <!-- Navigation --> <nav class="nav"> <div class="wrapper container"> <div class="logo"><a href="">Bubble And Balm</a></div> <ul class="nav-list"> <div class="top"> <label for="" class="btn close-btn"><i class="fas fa-times"></i></label> </div> <li><a href="index.php">Home</a></li> <li><a href="products.php">Products</a></li> <li><a href="account.php">Account</a></li> <li><a href="contactus.php">Contact Us</a></li> <?php if(isset($_SESSION['user_id'])) { ?> <li><a href="logout.php">Logout</a></li> <?php } else { ?> <li><a href="login.php">Login/Register</a></li> <?php } ?> <!-- icons --> <li class="icons"> <span> <img src="./images/shoppingBag.svg" alt="" /> </span> </li> </ul> <label for="" class="btn open-btn"><i class="fas fa-bars"></i></label> </div> </nav> navbar css and @media nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color:#ffd5ef; height: 6.5rem; line-height: 6.5rem; } .nav.fix-nav { width: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 999; } nav .wrapper { display: flex; align-items: center; justify-content: space-between; position: relative; } .wrapper .logo a { color: black; font-size: 2.7rem; font-weight: 600; padding: 0.5rem; margin-bottom: 10px; } .wrapper .nav-list { display: inline-flex; } .nav-list li i { color: var(--grey2); } .nav-list a { color: var(--black); font-size: 1.5rem; padding: 0.9rem 1.5rem; border-radius: 0.5rem; transition: all 300ms ease; } .nav-list li a:hover { color: var(--primary); } .nav-list .drop-menu1, .nav-list .drop-menu2 { box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); width: 20rem; top: 8.5rem; line-height: 4.5rem; position: absolute; background-color: var(--white); opacity: 0; visibility: hidden; transition: all 300ms ease; } .nav-list .drop-menu1 li a, .nav-list .drop-menu2 li a { display: block; font-size: 1.5rem; width: 100%; padding: 0 0 0 1.5rem; border-radius: 0; color: var(--grey2); } .nav-list .drop-menu1 li a:hover, .nav-list .drop-menu2 li a:hover { color: var(--primary); } .nav-list li:hover .drop-menu1, .nav-list li:hover .drop-menu2, .nav-list li:hover .mega-box { opacity: 1; visibility: visible; top: 6.5rem; } .mega-box { box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); position: absolute; top: 8.5rem; left: 0; width: 100%; padding: 0 3rem; background-color: var(--white); opacity: 0; visibility: hidden; transition: all 300ms ease; } .mega-box .content { padding: 2.5rem 2rem; display: flex; width: 100%; justify-content: space-between; } .mega-box .content .row { width: calc(25% - 3rem); line-height: 4.5rem; } .content .row img { width: 100%; height: 100%; object-fit: cover; } .content .row header { font-size: 1.6rem; font-weight: 700; color: var(--grey1); } .content .row .mega-links { border-left: 1px solid rgba(255, 255, 255, 0.09); margin-left: -4rem; } .content .row li { padding: 0 2rem; } .content .row li a { padding: 0 2rem; display: block; font-size: 1.5rem; color: var(--grey2); } .content .row li a:hover { color: var(--primary); } .nav-list .mobile-item { display: none; } .nav-list input { display: none; } .wrapper .btn { color: var(--white); font-size: 2rem; cursor: pointer; display: none; } .nav-list .icons span { display: inline-block; margin: 0.5rem 1rem 0 0; position: relative; } .nav-list .icons .count { justify-content: center; position: absolute; top: 0rem; right: -0.8rem; background-color: var(--primary); height: 2rem; padding: 0.5rem; color: var(--white); font-weight: 700; border-radius: 50%; } @media only screen and (max-width: 968px) { .wrapper .nav-list { position: fixed; top: 0; left: -100%; height: 100%; width: 100%; max-width: 35rem; background-color: var(--white); display: block; overflow-y: auto; line-height: 5rem; box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.1); transition: all 300ms linear; } .wrapper .nav-list.show { left: 0; } .nav-list li { margin: 1.5rem 1rem; } .nav-list a { display: block; font-size: 1.8rem; padding: 0 2rem; color: var(--black); } .nav-list .drop-menu1, .nav-list .drop-menu2 { position: static; opacity: 1; visibility: visible; top: 6.5rem; padding-left: 2rem; width: 100%; max-height: 0; overflow: hidden; } #showdrop1:checked ~ .drop-menu1, #showdrop2:checked ~ .drop-menu2, #showMega:checked ~ .mega-box { max-height: 100%; } .nav-list .drop-menu1 li, .nav-list .drop-menu2 li { margin: 0; } .nav-list .drop-menu1 li a, .nav-list .drop-menu2 li a { color: var(--grey2); font-size: 1.5rem; } .nav-list .desktop-item { display: none; } .nav-list .mobile-item { display: block; font-size: 1.8rem; padding-left: 2rem; color: var(--black); cursor: pointer; border-radius: 0.5rem; } .nav-list .mobile-item:hover { color: var(--primary); } .mega-box { position: static; top: 6.5rem; padding: 0 2rem; opacity: 1; visibility: visible; max-height: 0; overflow: hidden; transition: all 300ms ease; } .mega-box .content { flex-direction: column; padding: 2rem 2rem 0 2rem; } .mega-box .content .row { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.09); margin-bottom: 1.5rem; } .content .row:nth-child(1), .content .row:nth-child(2) { border-top: 0; } .content .row .mega-links { border-left: 0; padding-left: 2rem; } .row .mega-links li { margin: 0; } .wrapper .btn { display: block; color: var(--black); } .nav-list .top { position: relative; display: block; background-color: var(--primary); width: 100%; height: 8rem; } .nav-list .close-btn { position: absolute; top: 1.5rem; right: 2.5rem; color: rgb(100, 99, 99); } .nav-list .icons { padding-left: 2rem; } } custom scripts const openNav = document.querySelector(".open-btn"); const closeNav = document.querySelector(".close-btn"); const menu = document.querySelector(".nav-list"); const menuLeft = menu.getBoundingClientRect().left; openNav.addEventListener("click", () => { if (menuLeft < 0) { menu.classList.add("show"); } }); closeNav.addEventListener("click", () => { if (menuLeft < 0) { menu.classList.remove("show"); } }); // Fixed Nav const navBar = document.querySelector(".nav"); const navHeight = navBar.getBoundingClientRect().height; window.addEventListener("scroll", () => { const scrollHeight = window.pageYOffset; if (scrollHeight > navHeight) { navBar.classList.add("fix-nav"); } else { navBar.classList.remove("fix-nav"); } }); // Scroll To const links = [...document.querySelectorAll(".scroll-link")]; links.map(link => { if (!link) return; link.addEventListener("click", e => { e.preventDefault(); const id = e.target.getAttribute("href").slice(1); const element = document.getElementById(id); const fixNav = navBar.classList.contains("fix-nav"); let position = element.offsetTop - navHeight; window.scrollTo({ top: position, left: 0, }); navBar.classList.remove("show"); menu.classList.remove("show"); document.body.classList.remove("show"); }); });

wow, my eyes must definitely be shot, cant believe i missed it lol, thanks for spotting it

im trying to create a basic login page and after checking username and password and navigating to next page i get this error on the page it suppose to navigate to and the section of code its referring too Parse error: syntax error, unexpected token ";" in C:\xampp\htdocs\bubbleandbalm\index.php on line 4 <?php session_start(); if(isset($_SESSION['id']) && (isset($_SESSION['user_name'])){ ?> this is the full code for that page aswell <?php session_start(); if(isset($_SESSION['id']) && (isset($_SESSION['user_name'])){ ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>RedStore | Ecommerce Website Design</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css"> </head> <body> <div class="header"> <div class="container"> <div class="navbar"> <div class="logo"> <img src="images/logo.png" width="125px"> </div> <nav> <ul id="MenuItems"> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">About</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Account</a></li> </ul> </nav> <img src="images/cart.png" width="30px" height="30px" > <img src="images/menu.png" class="menu-icon" onclick="menutoggle()"> </div> <div class="row"> <div class="col-2"> <h1>Give Your Workout<br>A New Style?</h1> <p>Success isnt always about greatness. It's about consistency. consistent<br>hard work gains success, Greatness will come. </p> <a href="" class="btn">Explore Now &#8594;</a> </div> <div class="col-2"> <img src="images/image1.png"> </div> </div> </div> </div> <!--featured categories--> <div class="categories"> <div class="small-container"> <div class="row"> <div class="col-3"> <img src="images/category-1.jpg"> </div> <div class="col-3"> <img src="images/category-2.jpg"> </div> <div class="col-3"> <img src="images/category-3.jpg"> </div> </div> </div> </div> <!--featured products--> <div class="small-container"> <h2 class="title">Featured Products</h2> <div class="row"> <div class="col-4"> <img src="images/product-1.jpg"> <h4>Red Printed T-Shirt</h4> <p>£25.00</p> </div> <div class="col-4"> <img src="images/product-2.jpg"> <h4>Red Printed T-Shirt</h4> <p>40.00</p> </div> <div class="col-4"> <img src="images/product-3.jpg"> <h4>Red Printed T-Shirt</h4> <p>£30.00</p> </div> <div class="col-4"> <img src="images/product-4.jpg"> <h4>Red Printed T-Shirt</h4> <p>£20.00</p> </div> </div> <!--latest products--> <h2 class="title">Latest Products</h2> <div class="row"> <div class="col-4"> <img src="images/product-5.jpg"> <h4>Red Printed T-Shirt</h4> <p>£25.00</p> </div> <div class="col-4"> <img src="images/product-6.jpg"> <h4>Red Printed T-Shirt</h4> <p>40.00</p> </div> <div class="col-4"> <img src="images/product-7.jpg"> <h4>Red Printed T-Shirt</h4> <p>£30.00</p> </div> <div class="col-4"> <img src="images/product-8.jpg"> <h4>Red Printed T-Shirt</h4> <p>£20.00</p> </div> <div class="row"> <div class="col-4"> <img src="images/product-9.jpg"> <h4>Red Printed T-Shirt</h4> <p>£25.00</p> </div> <div class="col-4"> <img src="images/product-10.jpg"> <h4>Red Printed T-Shirt</h4> <p>40.00</p> </div> <div class="col-4"> <img src="images/product-11.jpg"> <h4>Red Printed T-Shirt</h4> <p>£30.00</p> </div> <div class="col-4"> <img src="images/product-12.jpg"> <h4>Red Printed T-Shirt</h4> <p>£20.00</p> </div> </div> </div> </div> <!--offer--> <div class="offer"> <div class="small-container"> <div class="row"> <div class="col-2"> <img src="images/exclusive.png" class="offer-img"> </div> <div class="col-2"> <p>Exclusively Available on RedStore</p> <h1>Smart Band 4</h1> <small>TheMi Smart Band 4 features a 39.9% larger AMOLED color full-touch display with adjustable brightness, so everything is clear as can be. </small> <a href="" class="btn">Buy Now &#8594;</a> </div> </div> </div> </div> <!--Brands--> <div class="brands"> <div class="small-container"> <div class="row"> <div class="col-5"> <img src="images/logo-godrej.png"> </div> <div class="col-5"> <img src="images/logo-oppo.png"> </div> <div class="col-5"> <img src="images/logo-coca-cola.png"> </div> <div class="col-5"> <img src="images/logo-paypal.png"> </div> <div class="col-5"> <img src="images/logo-philips.png"> </div> </div> </div> </div> <!--footer--> <div class="footer"> <div class="container"> <div class="row"> <div class="footer-col-1"> <h3>Download Our App</h3> <p>Download Appfor Android<br>and IOS mobile phone.</p> <div class="app-logo"> <img src="images/play-store.png"> <img src="images/app-store.png"> </div> </div> <div class="footer-col-2"> <img src="images/logo-white.png"> <p>Our purpose is to sustainably make the pleasure and<br>benefits of sports accessible to the many.</p> </div> <div class="footer-col-3"> <h3>Useful Links</h3> <ul> <li>Coupons</li> <li>Blog Posts</li> <li>Return Policy</li> <li>Join Affiliate</li> </ul> </div> <div class="footer-col-4"> <h3>Follow Us</h3> <ul> <li>Facebook</li> <li>Twitter</li> <li>Instagram</li> <li>Youtube</li> </ul> </div> </div> <hr> <p class="copyright">Copyright 2021 - Easy Tutorials</p> </div> </div> <!--js for toggle menu--> <script> var MenuItems = document.getElementById("MenuItems"); MenuItems.style.maxHeight = "0px"; function menutoggle(){ if(MenuItems.style.maxHeight == "0px"){ MenuItems.style.maxHeight = "200px"; } else{ MenuItems.style.maxHeight = "0px"; } } </script> </body> </html> <?php } else{ header("Location: account.php"); exit(); } ?> my login in page <?php session_start(); include "db_conn.php"; if (isset($_POST['uname']) && isset($_POST['password'])){ function validate($data){ $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } $uname = validate($_POST['uname']); $pass = validate($_POST['password']); if(empty($uname)){ header("Location: account.php?error=User Name is required"); exit(); } else if (empty($pass)){ header("Location: account.php?error=Password is required"); exit(); } else{ $sql = "SELECT * FROM login WHERE user_name = '$uname' AND password = '$pass'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) === 1){ $row = mysqli_fetch_assoc($result); if($row['user_name'] === $uname && $row['password'] === $pass){ $_SESSION['user_name'] = $row['user_name']; $_SESSION['name'] = $row['name']; $_SESSION['id'] = $row['id']; header("Location: index.php"); exit(); } else{ header("Location: account.php?error=Incorrect username or password"); exit(); } } else{ header("Location: account.php?error=Incorrect username or password"); exit(); } } } else{ header("Location: account.php"); exit(); } ?> db_conn page <?php $sname = "localhost"; $uname = "root"; $password = ""; $db_name = "users"; $conn = mysqli_connect($sname,$uname,$password, $db_name); if (!$conn){ echo "Connection failed!"; } ?>