Hello I created a menu underline in javascript. How do I stop the underline from going on the dropdown menu links? The problem is when I move the mouse out the menu and you still see the line.
Please let me know what is the best way to fix this. Thank you so much.
https://codepen.io/rubenjr005/pen/ExjQdjw?fbclid=IwAR1iXxZro17fFRKXmWKmi4N6sj0d_mRL6g4-MeVNaHip4IvUYM4YtCGJDPc
(function() {
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (let i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = this.getBoundingClientRect().width;
const height = this.getBoundingClientRect().height;
const left = this.getBoundingClientRect().left + window.pageXOffset;
const top = this.getBoundingClientRect().top + window.pageYOffset;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
const active = document.querySelector(" .mynav li.active");
if (active) {
const left = active.getBoundingClientRect().left + window.pageXOffset;
const top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
}
}
window.addEventListener("resize", resizeFunc);
})();
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
/*
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.color-overlay-container {
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 2;
position: absolute;
}
.btn-black{
padding: 1.5rem 2rem;
color: white;
background: black;
text-transform: uppercase;
font-weight: 900;
}
.btn-yellow{
padding: 1.5rem 2rem;
color: white;
background: #f7c51e;
text-transform: uppercase;
font-weight: 900;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
}
p {
margin: .5rem 0;
}
/* Utility Classes */
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin: auto;
grid-auto-rows: minmax(200px, auto);
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: auto;
}
.card {
background: #fff;
padding: 1rem;
}
/* Grid Container - END */
.container {
max-width: 1404px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-yellow {
color: #f7c51e;
}
.bg-yellow {
background: #f7c51e;
color: black;
}
.bg-grey {
background: #f9f9f9;
color: black;
}
.l-heading {
font-weight: bold;
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin: 0.75rem 0;
}
/* Padding */
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
/* All Around Padding */
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
/* Utility Classes - END */
/* ================ HOME PAGE ==================== */
/* HEADER */
.site-header {
background-color: transparent;
}
.site-header .header-container {
background: black;
color: white;
}
/* BLACK BAR */
.site-header .header-container .header-container_wrap {
padding: 30px 5px;
/* background: red; */
}
#masthead .header-container .header-container_wrap .items {
display: flex;
}
#masthead .header-container .header-container_wrap .items .contact-info {
display: flex;
}
#masthead .header-container .header-container_wrap .items .quality-logo {
margin-right: 3rem;
line-height: 5px;
}
#masthead .header-container .header-container_wrap .items .quality-logo p {
font-size: 14px;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
}
#masthead .header-container .header-container_wrap .items .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
}
#masthead .header-container .header-container_wrap .items .contact-info .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
background: black;
border-radius: 50%;
padding: 10px;
border: 1px solid #363636;
}
/* ========================== Bottom White Header Menu - START ================ */
/* Menu Underline */
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: 100;
transform: translateX(-60px);
pointer-events: none;
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: white;
overflow: hidden;
padding: 1rem;
}
#myTopnav .items {
display: flex;
justify-content: space-between;
align-items: center;
}
#myTopnav .items .item .mynav ul{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li:nth-child(4){
margin-left: .5rem;
/* background-color: red; */
}
/* Style the links inside the navigation bar */
.topnav a {
/* float: left;
display: block; */
color: rgb(94,94,94);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
/* Add an active class to highlight the current page */
/*
.active {
color: black;
font-weight: 600;
color: #363636;
} */
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* ============================ DROP DOWN MENU =============================== */
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left; */
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(94,94,94);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f7c51e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: rgb(94,94,94);
}
/* Style the links inside the dropdown */
.mynav .dropdown-content a {
font-size: 14px;
font-weight: 500;
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
text-transform: uppercase;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
color: black;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
/* background-color: red; */
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
/* SEARCH ICONS */
#myTopnav .items .item .fa-search{
font-size: 1.25rem;
color: #363636;
}
/* ========================== Bottom White Header Menu - END ================ */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">
<!-- Swiper Header Slider -->
<!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->
<title>Document</title>
</head>
<body id="home">
<!-- Header Container -->
<!-- Navbar-Black -->
<div id="masthead" class="site-header">
<nav class="header-container">
<!-- Top Black Header Bar -->
<div class="header-container_wrap">
<div class="container">
<div class="items">
<div class="quality-logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo">
<p>Offering Quality work at a fair price to the Central Texas area.</p>
</div>
<div class="contact-info">
<div class="item">
<i class="fas fa-phone"></i>
<div class="contact-block__value-wrap">
<p> Call Today</p>
<p><strong>(972)-555-5555</strong></p>
</div>
</div>
<div class="item">
<i class="fas fa-clock"></i>
<div class="contact-block__value-wrap">
<p>Mon-Fri:<strong> 7am to 7pm</strong></p>
<p>Sat & Sun: 9am-4pm</p>
</div>
</div>
<div class="item">
<i class="fas fa-map-marker-alt"></i>
<p>Serving Central Texas</p>
</div>
<div class="item">
<div class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======================== Bottom White header START ======================-->
<div class="topnav" id="myTopnav">
<div class="container">
<div class="items">
<div class="item">
<nav class="mynav">
<!-- Menu Click Here -->
<!-- Hamburger -->
<ul>
<div class="hamburger">
<!-- <p class="active">Menu Click Here</p> -->
<p>Menu Click Here </p> ☰
</div>
<li>About
<!-- DROPDOWN MENU -->
<li>
<div class="dropdown">
<button class="dropbtn">
Services <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Brush Mulching & Land Clearing
Mapping & Measurement
Erosion Mitigation / Driveways / Roads
Landscaping & Drainage Management
Foundation & Pads
General Dirt Work & Tank Pond Trenching
Demolition & Clean Up
Septic Installation
</div>
</div>
</li>
<!-- DROPDOWN MENU END -->
<li>Photo Gallery</li>
<li>Video Example</li>
<li>Contacts</li>
<!-- ☰ -->
</ul>
</nav>
</div>
<div class="item">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<span class="target"></span>
<!-- ======================== Bottom White header END ======================-->
</nav>
</div>
<!-- HEADER CONTAINER END -->
You can add another event listener that will check if the mouse leaves the whole navigation.
Then you can remove the inline style, thus reseting the target element.
document.querySelector(".mynav").addEventListener("mouseleave", function() {
target.removeAttribute("style");
})
Related
You want to implement the Top Menu and Left Side Menu.
The top menu is fixed to the top.
I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.
If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Link -->
<link rel="stylesheet" href="assets/css/left_sidemenu.css">
<link rel="stylesheet" href="assets/css/top_menu.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<title>SideBar sub menus</title>
</head>
<body id="body-pd">
<!-- top_menu -->
<nav class="navbar ">
<!-- logo_link -->
<div class="navbar__logo">
<i class="fa-solid fa-laptop-code"></i>
Project
</div>
<!-- menu_link -->
<ul class="navbar__menu">
<li>Login</li>
<li>Sign</li>
</ul>
</nav>
<!-- top_menu -->
<!-- left_sidemenu -->
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
Bedimcode
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Messenger</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Analytics</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Settings</span>
</a>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Log out</span>
</a>
</div>
</nav>
</div>
<!-- left_sidemenu -->
<h1>Componentes</h1>
<!-- IONICONS -->
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
left_sidemenu.css code
/* left_sidemenu.css */
/* GOOGLE FONTS */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/* VARIABLES CSS */
:root {
--nav--width: 92px;
/* Colores */
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
/* Fuente y tipografia */
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/* z index */
--z-fixed: 100;
}
/* BASE */
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/* l NAV */
.l-navbar {
position: fixed;
/* top: 0; */
left: 0;
width: var(--nav--width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/* NAV */
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav_name {
font-size: var(--small-font-size);
}
/* Expander menu */
/* width: calc(var(--nav--width) + 9.25rem); */
.expander {
width: calc(var(--nav--width) + 12rem);
}
/* Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/* Active links menu */
.active {
background-color: var(--first-color);
}
/* COLLAPSE */
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
/*
padding: 0px;
margin: 0px;
overflow: auto;
position: fixed;
*/
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/* Show collapse */
.showCollapse {
display: block;
}
/* Rotate icon */
.rotate {
transform: rotate(180deg);
transition: .5s;
}
left_sidemenu.js code
/* left_sidemenu.js */
/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if( toggle && navbar ) {
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander');
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++) {
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
});
}
top_menu.css code
/* top_menu.css */
:root {
--text-color: #f0f4f5;
--background-color: #12192c;
--accent-color: orange;
--icons-color: rgb(152, 187, 201);
--bodybackground-color: rgb(255, 255, 255);
}
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 75px;
}
a {
font-size: 20px;
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'STIX Two Math';
position: fixed;
/* width: 100% */
top: 0;
left: 0;
right: 0;
}
.navbar__logo i {
color: var(--accent-color);
padding-left: 0;
}
.navbar__menu {
list-style: none;
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 30px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 3px;
}
#media screen and (max-width: 700px) {
}
#font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve#1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
background: rgba(0, 0, 0, .4);
}
p {
color: #aaa;
margin-bottom: 10px;
}
p:hover {
color: #fff
}
p:hover {
width: 100%;
transition: width .3s;
}
Screenshot 1
Screenshot 2
This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 45px;
}
As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:
/* Add padding body*/
.body-pd {
/* padding: rem 0 0 16rem; */
}
Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.
I was wondering if there is a way to loop through the height on my menu dropdown and make it slide down, instead of just appearing like it does now?
I was trying to do something like this:
var list = document.getElementById("list");
var listElements = list.childElementCount;
var height = 1.5 * listElements;
var x = document.getElementById("burgerMenu");
if (x.style.height === "0rem") {
x.style.height = height + "rem";
} else {
x.style.height = "0rem";
}
But can't seem to get it right...
I know I need to add a transition and then change the height of the div, but I'm a bit stuck on how exactly.
The JS event listener just listen if there is a click on the three lines or if it's something else, it removes the class (outside of three lines) or toggle (clicking on three lines).
I think the animation should be on topnav-menu or am I wrong, since this is the div with the content in it.
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
display: none;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
You can give height:0 instead of display:none to achieve slide transition. Also add overflow:hidden so it won't show content when the height is 0 and once the menu toggles you can give height:auto
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
height:0;
overflow:hidden;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
height:auto;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I'm currently trying to create a website from scratch, seen as I have the time to practice.
So far, I have got a working navigation bar (one which does not actually take you to other pages yet but does actually work ).
I decided to make this navigation bar responsive, as it is quite a big bar.
I have given the option of a vertical bar at a click of a button.
To note, the button is only available to the user when the browser is less than 900px width.
My current issue is that when the button is pressed, nothing is being displayed. I have ensured the javascript for the button is working, via trial and error but still have no luck.
I am new to this, so forgive me if my error is silly but any help would be greatly appreciated.
To help give an idea of what I am trying to achieve, here is the link I have been using as guidance: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
If the issue lays within the fact that I am using an 'unordered list' tag to align my navigation bar to the right and my logo to the left, then any alternative way is welcome too!
Thank you.
P.s. ignore the names of each section in the navigation, I was just filling in the spaces for now ^^
body{
background-color: grey;
margin:0;
}
/*----------------------NAVIGATION BAR----------------------*/
.nav-container{
background-color: white;
float: right;
height: 80px;
position: absolute;
width: 100%;
margin-top: 0;
}
#nav-menu{
float:right;
padding: 13px 13px;
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
float: left;
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
#nav-menu li a:not(.icon) {display: none;}
#nav-menu li a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.nav-bar.responsive {position: relative;}
.nav-bar.responsive li a.icon{
position: relative;
right: 0;
top: 0;
}
.nav-bar.responsive li a{
float: none;
display: block;
text-align: left;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="practice.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="nav-container">
<ul id="logo">Dellion</ul>
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
</script>
</body>
</html>
Simplify your layout by using flexbox
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
body {
background-color: grey;
margin: 0;
}
.nav-container {
display: flex;
background-color: white;
min-height: 80px;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
#logo {
font-size: 27px;
padding: 0 13px;
height: 80px;
line-height: 80px;
}
.nav-bar {
flex-direction: row;
}
.nav-bar li {
list-style: none;
}
.nav-bar a {
color: #000;
font-size: 20px;
padding: 10px 12px;
text-decoration: none;
}
.nav-links {
margin-left: auto;
padding-right: 20px;
display: flex;
flex: 1;
justify-content: flex-end;
}
.hamburger .icon {
/* remove the styling, this code is for illustration purpose only*/
height: 40px;
width: 40px;
background: grey;
border: 1px solid #000;
}
.nav-bar,
.hamburger .icon {
display: none;
}
.hamburger {
position: absolute;
right: 20px;
top: 20px;
}
#media screen and (min-width: 901px) {
.nav-bar,
.nav-bar.responsive {
display: flex;
align-items: center;
}
}
#media screen and (max-width: 900px) {
.hamburger .icon {
display: block
}
.nav-bar.responsive {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
}
.nav-links {
flex-basis: 100%;
margin: 0;
padding: 0;
}
.nav-bar li {
padding: 10px 0;
}
}
<div class="nav-container">
<div id="logo">Dellion</div>
<div class="nav-links">
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
</ul>
<div class="hamburger">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
</div>
</div>
There is a very simple way:
.nav-container{
background-color: white;
/* float: right; */
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 0;
}
#nav-menu{
/* float:right; */
/* padding: 13px 13px; */
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
/* float: left; */
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
And I recommended you to read this useful article about css Flexbox.
I think part of your problem is, :
Javascript:
if (x.className === "nav-bar") {
x.className += " responsive"; //add space after quotation mark, otherwise class is added adjacent
} else {
x.className = "nav-bar";
}
Css:
.nav-bar.responsive li a{
float: none;
display: block !important; /* I think this needs to be crushed with important */
text-align: left;
/* position: relative; you don't need it */
}
you can simply do it with css
flex-direction: column;
Hello my menu links wont Connect to the other web pages. Im pretty sure one of my javascript functions is causing these menu links to not work but im not sure how to figure out how to fix this.
I added a function that creates a menu underline under each menu. So if i had to guess this is probably what is causing the issue. You can see the website live if you click on the link below.
http://lonestarwebandgraphics.com/
// ============= MENU HOVER UNDERLINE EFFECT - START =================
// Menu Underline Function - START
(function() {
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["#f7c51e"];
// const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (let i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
// links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = this.getBoundingClientRect().width;
const height = this.getBoundingClientRect().height;
const left = this.getBoundingClientRect().left + window.pageXOffset;
const top = this.getBoundingClientRect().top + window.pageYOffset;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
const active = document.querySelector(" .mynav li.active");
if (active) {
const left = active.getBoundingClientRect().left + window.pageXOffset;
const top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
}
}
window.addEventListener("resize", resizeFunc);
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START
document.querySelector(".mynav").addEventListener("mouseleave", function() {
target.removeAttribute("style");
})
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END
})();
// ============= MENU HOVER UNDERLINE EFFECT - END =================
// ============= Add "Responsive" Class When Click On "Menu Click Here" Hamburger - Menu Dropdown =================
function myFunction() {
var x = document.getElementById("mybottomnav");
if(x.classList.contains("responsive")) {
x.classList.remove("responsive");
} else {
x.classList.add("responsive");
}
}
// // This code has an error - It removes the sticky in mobile view
// function myFunction() {
// var x = document.getElementById("mybottomnav");
// if (x.className === "bottomnav") {
// x.className += " responsive";
// } else {
// x.className = "bottomnav";
// }
// }
// ============= WHITE NAVBAR STICKY =================
// When the user scrolls the page, execute myFunction
window.onscroll = function() {stickyFunction()};
// Get the navbar
var navbar = document.getElementById("mybottomnav");
// Get the offset position of the navbar
var sticky = mybottomnav.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
if (window.pageYOffset >= sticky) {
mybottomnav.classList.add("sticky")
} else {
mybottomnav.classList.remove("sticky");
}
}
// Fixed White Navbar Sticky Dropdown To Work on Mobile.
// function fixed_top_menu() {
// var windows = $(window);
// windows.on("scroll", function () {
// var header_height = $(".bottomnav").height();
// var scrollTop = windows.scrollTop();
// if (scrollTop > header_height) {
// $(".bottomnav").addClass("sticky");
// } else {
// $(".bottomnav").removeClass("sticky");
// }
// });
// }
// fixed_top_menu();
#import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
/*
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.color-overlay-container {
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 2;
position: absolute;
}
.btn-black{
padding: 1.5rem 2rem;
color: white;
background: black;
text-transform: uppercase;
font-weight: 900;
}
.btn-yellow{
padding: 1.5rem 2rem;
color: white;
background: #f7c51e;
text-transform: uppercase;
font-weight: 900;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
}
p {
margin: .5rem 0;
}
/* Utility Classes */
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin: auto;
grid-auto-rows: minmax(200px, auto);
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: auto;
}
.card {
background: #fff;
padding: 1rem;
}
/* Grid Container - END */
.container {
max-width: 1404px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-yellow {
color: #f7c51e;
}
.bg-yellow {
background: #f7c51e;
color: black;
}
.bg-grey {
background: #f9f9f9;
color: black;
}
.bg-black {
background:black;
color: white;
}
.l-heading {
font-weight: bold;
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin: 0.75rem 0;
}
/* Padding */
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
/* All Around Padding */
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
/* Utility Classes - END */
/* ================ HOME PAGE ==================== */
/* HEADER */
.site-header {
background-color: transparent;
}
.site-header .header-container {
background: black;
color: white;
}
/* BLACK BAR */
.site-header .header-container .header-container_wrap {
padding: 30px 5px;
/* background: red; */
}
#masthead .header-container .header-container_wrap .items {
display: flex;
justify-content: center;
}
#masthead .header-container .header-container_wrap .items .contact-info {
display: flex;
}
#masthead .header-container .header-container_wrap .items .quality-logo {
margin-right: 3rem;
line-height: 5px;
}
#masthead .header-container .header-container_wrap .items .quality-logo p {
font-size: 14px;
line-height: 1.5;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
/*
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
color: white;
background-color: black;
} */
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
background-color: black; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: none; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
#masthead .header-container .header-container_wrap .items .item .facebook-like:hover {
/* Darker background on mouse-over */
color: #f7c51e;
}
#masthead .header-container .header-container_wrap .items .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
}
#masthead .header-container .header-container_wrap .items .contact-info .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
background: black;
border-radius: 50%;
padding: 10px;
border: 1px solid #363636;
}
/* ========================== Bottom White Header Menu - START ================ */
/* Menu Underline */
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: 100;
transform: translateX(-60px);
pointer-events: none;
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}
/* ================================ STICKY ========================*/
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.bottomnav.sticky {
padding: 0rem;
}
.bottomnav.sticky .items .item {
margin: auto;
}
.bottomnav.sticky .items .item:nth-child(2) {
display: none;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/* .sticky + .swiper-container {
padding-top: 60px;
}
*/
.bottomnav {
background-color: white;
overflow: hidden;
padding: 1rem;
z-index: 1200;
}
#mybottomnav .items {
display: flex;
justify-content: space-between;
align-items: center;
}
#mybottomnav .items .item .mynav ul{
display: flex;
align-items: center;
}
#mybottomnav .items .item .mynav ul li{
display: flex;
align-items: center;
}
#mybottomnav .items .item .mynav ul li:nth-child(4){
margin-left: .5rem;
/* background-color: red; */
}
/* Style the links inside the navigation bar */
.bottomnav a {
/* float: left;
display: block; */
color: rgb(94,94,94);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
/* Add an active class to highlight the current page */
/*
.active {
color: black;
font-weight: 600;
color: #363636;
} */
/* Hide the link that should open and close the bottomnav on small screens */
.bottomnav .icon {
display: none;
}
/* ============================ DROP DOWN MENU =============================== */
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left; */
overflow: hidden;
}
/* Style the dropdown button to fit inside the bottomnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
/* color: rgb(94,94,94); */
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: fixed;
background-color: #f7c51e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: rgb(94,94,94);
}
/* Style the links inside the dropdown */
.mynav .dropdown-content a {
font-size: 14px;
font-weight: 500;
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
text-transform: uppercase;
}
/* Add a dark background on bottomnav links and the dropdown button on hover */
.bottomnav a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
color: black;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
/* background-color: red; */
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
/* SEARCH ICONS */
#mybottomnav .items .item .fa-search{
font-size: 1.25rem;
color: #363636;
}
/* ========================== Bottom White Header Menu - END ================ */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Keywords -->
<meta name="description" content="Mulching Company for any type of commercial, government or private client!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="img/Quality_Improvements_favicon_Logo.png" type="image/gif" sizes="16x16">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">
<!-- text animation css -->
<!-- <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> -->
<!-- <link rel="stylesheet" href="css/tachyons-animate.css"> -->
<!-- Swiper Header Slider -->
<!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->
<title>Quality Mulching</title>
</head>
<body id="home">
<!-- Header Container -->
<!-- Navbar-Black -->
<div id="masthead" class="site-header">
<nav class="header-container">
<!-- Top Black Header Bar -->
<div class="header-container_wrap">
<div class="container">
<div class="items">
<div class="quality-logo">
<a href="https://www.lonestarwebandgraphics.com">
<img border="0" alt="quality-logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo" >
</a>
<!-- <img src="img/Quality_Improvements_250PX_Logo.png" alt="quality-logo"> -->
<p>Offering Quality work at a fair price to the Central Texas area.</p>
</div>
<div class="contact-info">
<div class="item">
<i class="fas fa-phone"></i>
<div class="contact-block__value-wrap">
<p> Call Today</p>
<p><strong>(555-2042</strong></p>
</div>
</div>
<div class="item">
<i class="fas fa-clock"></i>
<div class="contact-block__value-wrap">
<p>Mon-Fri:<strong> 7am to 7pm</strong></p>
<p>Sat & Sun: 9am-4pm</p>
</div>
</div>
<div class="item">
<i class="fas fa-map-marker-alt"></i>
<p>Serving Central Texas</p>
</div>
<div class="item">
<button class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</button>
<!-- <div class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- ======================== Bottom White header START ======================-->
<div class="bottomnav" id="mybottomnav">
<div class="container">
<div class="items">
<div class="item">
<nav class="mynav">
<!-- Menu Click Here -->
<!-- Hamburger -->
<ul>
<div class="hamburger">
<!-- <p class="active">Menu Click Here</p> -->
<p>Menu Click Here </p> ☰
</div>
<li>About</li>
<!-- DROPDOWN MENU -->
<li>
<div class="dropdown">
<button class="dropbtn">
Services <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Brush Mulching & Land Clearing
Mapping & Measurement
Erosion Mitigation / Driveways / Roads
Landscaping & Drainage Management
Foundation & Pads
General Dirt Work & Tank Pond Trenching
Demolition & Clean Up
Septic Installation
</div>
</div>
</li>
<!-- DROPDOWN MENU END -->
<li>Photo Gallery</li>
<li>Video Example</li>
<li>Contacts</li>
<!-- ☰ -->
</ul>
</nav>
</div>
<div class="item">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<span class="target"></span>
<!-- ======================== Bottom White header END ======================-->
</nav>
</div>
<!-- HEADER CONTAINER END -->
The issue was fixed by
Removing - links[i].addEventListener("click", (e) => e.preventDefault());
in javascript.
I am working on a personal website.
In this site I would like to have the navigation links become active when I scroll to the part of the page relating to that navigation link, all other active links should then have the nav-active class removed.
I have it working partially, the navigation links are highlighting correctly. I do not understand why the active highlighting is not removed when the scrolling moves into the links that are under a div dropdown button.
Can anyone point me in the right direction and also point me to some tutorials/reading (not too advanced) on the relevant information about this issue?
My pen is here:
https://codepen.io/pjsmyth/pen/ZvaZBO/
Thanks in advance
Pete
Code below:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).addClass('nav-active');
$(this).siblings().removeClass('nav-active');
$(this).children().removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>
I think you wish the .dropbtn to highlight when a .scroll under it is highlighted...
There could be a couple ways to do it.
But since the sections (div) have fixed offsets, you can get them all in an array, on load... And then compare them with the scrolled position.
When we have a "match", get its id from another array holding the ids and quit that loop right away.
Here is the script:
$(document).ready(function() {
var scrollLink = $('.scroll');
var dropbtn = $(".dropbtn");
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Get all section position and id
var sectionArr = [];
var sectionId = [];
$("body>div").each(function(){
console.log($(this).attr("id") + " " + $(this).offset().top);
sectionArr.push($(this).offset().top-20);
sectionId.push($(this).attr("id"));
});
// Add the full page height to the array for the comparison of the last section
sectionArr.push($("body").height());
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
// Remove the class everywhere
scrollLink.removeClass('nav-active');
dropbtn.removeClass('nav-active');
// Compare the scrolled position with the offsets stored in array until we find.
for(i=0;i<sectionArr.length;i++){
var target = $(".scroll[href='#"+sectionId[i]+"']");
// if the scrolled position is more than a section position, BUT less than the next
if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
// add the highlight class
target.addClass("nav-active");
if(target.parent().is(".dropdown-content")){
// add the highlight class to the dropdown button
target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
}
break; // Exit the loop on match
}
} // End for loop
}); // End on scroll
}); // End ready
CodePen
Note that you could adjust the "trigger point" so the menu highlighting occurs when more than the half of the section is displayed, which I really think would be nicer!
Just update this line:
sectionArr.push($(this).offset().top-20 - ($(this).height()/2));
That's because your DOM is in the incorrect order. In your DOM, "About" is the last DOM element with .scroll, and since About is also valid for sectionOffset <= scrollbarLocation and is the last item to be processed it overwrites the class manipulation for the other navigation elements that are on screen.
I partially fixed it in this demo here.
Your conditional selection logic is a little confused. The way you have it set up now, if the sectionOffset is less than the scrollbarLocation then you try to set the nav-active class on the current link and remove it from the siblings, children and parent links.
The problem is that if the current link is itself a child link, then the links you want to unset are going to be siblings of the link, siblings of the parent of the link or children of the siblings of the parent link.
You could cover all of those cases manually, but then your code becomes convoluted and brittle. What if, at some point in the future, you want to add additional layers of link nesting? You'd have to manually account for that.
Luckily, since you're already looping through all of your links on a scroll event, there's an easier way. Just check to see if a section has scrolled off of the screen and remove the nav-active class of it's associated link by changing your each callback:
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
Updated CodePen
Here it is as a snippet:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>