From 5d332cbe48063e4daa7f5c0852238c5328071f71 Mon Sep 17 00:00:00 2001 From: "heritagealabi@gmail.com" Date: Sun, 25 Oct 2020 19:37:20 +0100 Subject: [PATCH] someCommitMessage --- nav.css | 534 ++++++++++++++++++++++++++++++++++------------------ nav.js | 10 +- navbar.html | 37 ++-- 3 files changed, 380 insertions(+), 201 deletions(-) diff --git a/nav.css b/nav.css index 7321d98..9fcb18d 100644 --- a/nav.css +++ b/nav.css @@ -1,184 +1,350 @@ - - -body::-webkit-scrollbar-button{ - background:rgb(59, 6, 90); -} - -body::-webkit-scrollbar-button:hover{ - background:#aa12c9; - border-radius: 5px; -} - -body::-webkit-scrollbar{ - width: 10px; -} - -body::-webkit-scrollbar-track{ - background:rgb(59, 6, 90); -} - -body::-webkit-scrollbar-thumb{ - border-radius: 5px; - box-shadow: inset 0 0 6px rgb(59, 6, 90); - background: linear-gradient(#aa12c9,rgb(190, 74, 236)); -} - -body::-webkit-scrollbar-thumb:hover{ - background: linear-gradient(rgb(190, 74, 236),#aa12c9); -} - -/* Style the navbar */ -#navbar { - z-index: 10000; - display: flex; - position: fixed; - justify-content: center; - height: 50px; - top: 0; - left: 0; - width: 100%; - overflow: hidden; - background-color:rgb(59, 6, 90); -} - - /* Navbar links */ -.logo{ - position: fixed; - opacity: 90%; - top: -62px; - left: -35px; -} - - - -.navlinks{ - position: static; - display: flex; - justify-content: space-around; - margin-top: 5px; -} - - - - -.navlinks li{ - list-style: none; -} - -#navbar a { - display: flex; - color: #f2f2f2; - text-align: center; - padding: 14px; - text-decoration: none; - cursor: pointer; - font-size: x-large; - font-family: consolas; - text-transform: uppercase; -} - - - - - /* Style the active class (and buttons on mouse-over) */ -.active, .btn:hover { - background-color:#aa12c9; - border-top-left-radius: 15px; - border-top-right-radius: 15px; -} - - /* Page content */ -.content { - padding: 30px; -} - - - /* 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) */ - .content { - padding-top: 60px; -} - -.faq{ - margin-left: 30%; -} - -label #btnNav, -label #cancel{ - position: fixed; - color: white; - font-size: 30px; - right:2%; - top: 2%; - cursor: pointer; - display: none; - -} - -#check{ - display: none; -} - - - -@media screen and (max-width:1366px){ - #logo{ - transition: 0.2s ease-in-out; - } - -} -@media screen and (max-width:800px){ - .logo{ - float: left; - } - .navlinks{ - position: absolute; - right: 0px; - } - - .faq{ - margin-left: 0; - } -} -@media screen and (max-width:619px){ - /* body{ - display: none; - } */ - -label #btnNav{ - display: block; -} - -.logo{ - position: relative; - top: -90px; -} - - -.navlinks{ - position: fixed; - display: flex; - flex-direction: column; - top: 8vh; - background-color: rgb(59, 6, 90); - align-items: center; - width: 50%; - height: 92vh; - transform: translateX(100%); - transition: transform 0.5s ease-in; -} - -#check:checked ~ ul{ - transform: translateX(0%); -} - -#check:checked ~ label #btnNav{ - display: none; -} - -#check:checked ~ label #cancel{ - display: block; -} - -} - - + + +body::-webkit-scrollbar-button{ + background:rgb(59, 6, 90); +} + +body::-webkit-scrollbar-button:hover{ + background:#aa12c9; + border-radius: 5px; +} + +body::-webkit-scrollbar{ + width: 10px; +} + +body::-webkit-scrollbar-track{ + background:rgb(59, 6, 90); +} + +body::-webkit-scrollbar-thumb{ + border-radius: 5px; + box-shadow: inset 0 0 6px rgb(59, 6, 90); + background: linear-gradient(#aa12c9,rgb(190, 74, 236)); +} + +body::-webkit-scrollbar-thumb:hover{ + background: linear-gradient(rgb(190, 74, 236),#aa12c9); +} + +/* Style the navbar */ +/* +#navbar { + z-index: 10000; + display: flex; + position: fixed; + justify-content: center; + height: 50px; + top: 0; + left: 0; + width: 100%; + overflow: hidden; + background-color:rgb(59, 6, 90); +} +*/ + + /* Navbar links */ + /* +.logo{ + position: fixed; + opacity: 90%; + top: -62px; + left: -35px; + + + + +.navlinks{ + position: static; + display: flex; + justify-content: space-around; + margin-top: 5px; +} + + + + +.navlinks li{ + list-style: none; +} + + +#navbar a { + display: flex; + color: #f2f2f2; + text-align: center; + padding: 14px; + text-decoration: none; + cursor: pointer; + font-size: x-large; + font-family: consolas; + text-transform: uppercase; +} +*/ + +/* Editted */ +li { + list-style-type: none; +} +.flex { + display: flex; +} +.col { + flex-direction: column; +} +.row { + flex-direction: row; +} +.logo{ + width:100px; +} + +header { + position: fixed; + top: 0px; + right: 0; + left: 0; + height: 100px; + z-index: 1; + background-color:rgb(59, 6, 90); + box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); + display: flex; + justify-content: space-between; + align-items: center; + +} +header .logo { + align-items: flex-start; + +} +header .logo img { + margin: 0 0 10px 0; +} + +nav { + height: inherit; + width: 50%; +} +nav ul { + width: 100%; + height: inherit; + align-items: center; + justify-content: space-between; +} + +nav a { + + color: #f2f2f2; + text-align: center; + padding: 14px; + text-decoration: none; + cursor: pointer; + font-size: x-large; + font-family: consolas; + text-transform: uppercase; + white-space: nowrap; +} + + + + /* Style the active class (and buttons on mouse-over) */ +.active, .btn:hover { + background-color:#aa12c9; + border-top-left-radius: 15px; + border-top-right-radius: 15px; +} + + /* Page content */ + /* +.content { + padding: 10px; +} + + */ + /* 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) */ + .content { + padding-top: 100px; +} +/* +.faq{ + margin-left: 30%; +}*/ +/* +label #btnNav, +label #cancel{ + position: fixed; + color: white; + font-size: 30px; + right:2%; + top: 2%; + cursor: pointer; + display: none; + +} + +#check{ + display: none; +}*/ + + +@media screen and (max-width:1366px){ + /* + #logo{ + transition: 0.2s ease-in-out; + } + */ + + +} +@media screen and (max-width:800px){ + + nav ul.flex.row { + padding-top: 80px; + z-index: 2; + justify-content: flex-start; + background:rgb(59, 6, 90); + position: absolute; + left: 0; + top: 0; + max-width: 100%; + width: 100%; + min-height: 110vh; + flex-direction: column; + overflow: hidden; + transition-duration: 300ms; + transform: translateX(-100%) +} +nav.open ul.flex.row { + transform: translateX(0) +} +nav { + width: fit-content +} +nav ul.flex.row li { + margin-bottom: 40px; +} +#nav-icon { + position: relative; + z-index: 4; + margin-top: 25px; + width: 35px; + height: fit-content; + cursor: pointer; +} +div #nav-icon { + border-radius: 2px; + height: 3px; + width: 35px; + margin-bottom: 10px; + background-color: black; + transition-duration: 300ms; +} +#nav-icon div:nth-child(3) { + margin-bottom: 0; +} +.open #nav-icon div:nth-child(1){ + transform: rotateZ(-45deg) translateX(-8px)translateY(10px); + color: black; +} +.open #nav-icon div:nth-child(2) { + opacity: 0; + color: black; +} +.open #nav-icon div:nth-child(3){ +transform: rotateZ(45deg) translateX(-8px)translateY(-10px); +color: black; +} +} +@media screen and (max-width:619px){ + nav ul.flex.row { + padding-top: 80px; + z-index: 2; + justify-content: flex-start; + background:rgb(59, 6, 90); + position: absolute; + left: 0; + top: 0; + max-width: 100%; + width: 100%; + min-height: 110vh; + flex-direction: column; + overflow: hidden; + transition-duration: 300ms; + transform: translateX(-100%) +} +nav.open ul.flex.row { + transform: translateX(0) +} +nav { + width: fit-content +} +nav ul.flex.row li { + margin-bottom: 40px; +} +#nav-icon { + position: relative; + z-index: 4; + margin-top: 25px; + width: 35px; + height: fit-content; + cursor: pointer; +} + div#nav-icon { + border-radius: 2px; + height: 3px; + width: 35px; + margin-bottom: 10px; + background-color: black; + transition-duration: 300ms; +} +#nav-icon div:nth-child(3) { + margin-bottom: 0; +} +.open #nav-icon div:nth-child(1){ + transform: rotateZ(-45deg) translateX(-8px)translateY(10px); + color: black; +} +.open #nav-icon div:nth-child(2) { + opacity: 0; + color: black; +} +.open #nav-icon div:nth-child(3){ +transform: rotateZ(45deg) translateX(-8px)translateY(-10px); +color: black; +} +/* +label #btnNav{ + display: block; +} */ +/* +.navlinks{ + position: fixed; + display: flex; + flex-direction: column; + top: 8vh; + background-color: rgb(59, 6, 90); + align-items: center; + width: 50%; + height: 92vh; + transform: translateX(100%); + transition: transform 0.5s ease-in; +} +*/ +/* +#check:checked ~ ul{ + transform: translateX(0%); +} +*/ +/* +#check:checked ~ label #btnNav{ + display: none; +} + +#check:checked ~ label #cancel{ + display: block; +} + +} + +*/ +} \ No newline at end of file diff --git a/nav.js b/nav.js index fc5e677..20a9539 100644 --- a/nav.js +++ b/nav.js @@ -1,3 +1,11 @@ +// Toggle function to open and close nav bar + +var icon = document.getElementById("nav-icon"); +var nav = document.getElementById("nav"); +icon.addEventListener("click", function(){ + nav.classList.toggle("open") +}) + //hide navbar @@ -14,10 +22,8 @@ function scrollFun1() { scrollPrev = scrollCur; } - // When the user scrolls down 50px from the top of the document, resize the header logo size - function scrollFun2() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 && document.body.offsetWidth > 620) { document.getElementById('logo').style.width= "150px"; diff --git a/navbar.html b/navbar.html index abfa9be..e05ede7 100644 --- a/navbar.html +++ b/navbar.html @@ -4,24 +4,28 @@ Navbar - - + + +
+ + + + + +