Develop Reference

How do I make each link show its own text on the background when hovering?

I have 3 links when hovering over which I want a certain text to appear in the background. That is, when I hover the mouse cursor over "Works", "Works" appears in the background, when I hover over "About", "About" appears in the background. I don't understand how to do this if I add a second text, they climb on top of each other.
I attach my code below (You need to open the whole page to see the result).
I will be grateful if you help
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text{
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover{
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
<div class="info__black-hover"></div>
</ul>
</section>

You could perhaps use pseudo ::before elements with attr() function as the css content value...
content: attr(data-text);
Data attribute then set in the .info__link anchor tag...
<a class="info__link" href="#" data-text="Works">Works</a>
Could do with some refining but the method uses less markup.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/714rpkw8/1/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 50%;
bottom: 50%;
transition: all .5s ease;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
background: #1c1c1c;
overflow: hidden;
z-index: -10;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Another option, is you can use :has(), tho not fully supported by all browsers yet.
See :has() compatibility https://caniuse.com/?search=has
Using :has() in this example below runs the background transition effect behind all the before elems using attr() to render the data-text attribute value.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/y9164hxz/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 60px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Let me know if this works or you need more refinement.
Update
I like your site design, but those effects you got on your text would be tricky to do using my pseudo element pure css version.
The closest I could get to your current design using pure CSS and pseudo elements was like this...
See fiddle version here... https://jsfiddle.net/joshmoto/d8rf93mp/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 70px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
bottom: 0%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
vertical-align: baseline;
line-height: 150px;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
text-align: center;
transform: skewY(45deg);
transform-origin: 0% 0%;
}
.info__link:hover::before {
top: 0;
bottom: 0;
transform: skewY(0deg);
}
.info__link>SPAN {
display: block;
overflow: hidden;
position: relative;
}
.info__link>SPAN::before {
content: attr(data-text);
display: block;
position: relative;
transform: translateY(0%);
transition: all .5s ease;
transform-origin: 100% 100%;
}
.info__link:hover>SPAN::before {
transform: translateY(-100%) skewY(45deg);
}
.info__link>SPAN::after {
content: attr(data-text);
display: block;
position: absolute;
width: 100%;
top: 100%;
transition: all .5s ease;
transform: skewY(45deg);
transform-origin: 0 0;
}
.info__link:hover>SPAN::after {
top: 0;
transform: skewY(0);
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">
<span data-text="Works"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">
<span data-text="About"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">
<span data-text="Contact"></span>
</a>
</li>
</ul>
</section>

Try this, I think it will be much better and simple:
CSS
section {
display: flex;
position: relative;
justify-content: space-between;
transition: .3s;
font-family:sans-serif;
background: #eee;
}
section:hover {
background: black;
}
section:hover a{
color: white;
}
section a {
width: 33%;
text-decoration: none;
font-size: 30px;
color: black;
height: 400px;
display: flex;
padding-top: 100px;
justify-content: center;
}
section .background_text {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
color: white;
align-items: center;
justify-content: center;
font-size: 100px;
pointer-events: none;
transform: translateY(100px);
opacity: 0;
transition: .3s;
}
section .background_text.active {
transform: translateY(0);
opacity: 1;
}
JAVASCRIPT
let background_text = document.querySelector('.background_text');
let links = document.querySelectorAll('a.link');
links.forEach( e => {
e.onmouseover = function () {
background_text.classList.add('active');
background_text.textContent = e.textContent;
}
e.onmouseleave = function () {
background_text.classList.remove('active');
}
});
HTML
<section>
<div class="background_text"></div>
Works
About
Contact
</section>

Making yur HTML into 'legal' code, by putting the divs holding the larger text into the li elements instead of separately, we then alter the hover state CSS so that it is the child of the hovered element that is being transformed (not a sibling as in the original).
This snippet has just those changes:
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover .info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover .info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
</li>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
</li>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a>
<div class="info__black-hover"></div>
</li>
</ul>
</section>
There are other things you may want to look at. For example, would the user of first-character be helpful instead of a separate span element in the text of the large words. Also, what exactly you want the effect on the Contact element when hovered to be. At the moment just a black rectangle appears.

You can use data-attribute and access it in ::before or ::afetr css's content property. for more info visit this.
Below we are accessing data-linkfor value and displaying it in background.
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__text:hover .info__link {
color: #fff;
}
.info__link:hover {
color: white;
}
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
<section class="info">
<ul class="info__container">
<li data-linkfor="Works" class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<li data-linkfor="About" class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<li data-linkfor="Contact" class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
</ul>
</section>

How can I make the social links in my mobile menu fit together on one line?

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>

Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

How to make a sticky Navigation Bar | HTML, CSS & JS

I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>

Navigation Items not displaying on large screens

My navigation items are not displaying on large screens, however on mobile devices they are displaying as expected. Can anyone assist me with a solution. I am suspecting that it has to do with the clip-path property, however i have tried to play around with it and haven't had any joy.I want the navigation items to display on large screens as it is displaying on mobile devices.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.navBar {
position: relative;
height: 10vh;
display: flex;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #003300;
}
.navbrand {
padding: .8em 0 0 1em;
/* margin: 2.5em 0;*/
}
.logo {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
}
.navList {
position: absolute;
background: #003300;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
padding-top: 9em;
}
.navList.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.navItem {
text-align: center;
padding-top: 1.2em;
}
.navLink {
font-size: 1rem;
font-weight: 600;
color: #fff;
line-height: 1.6;
}
.navLink:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.navLink:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.navLink:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(4) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(5) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(6) {
transition: all 0.5s ease 0.6s;
}
.navLink.fade {
opacity: 1;
}
.navLink:focus {
color: #ff0000;
opacity: .3;
}
.navLink:hover {
color: #ff0000;
opacity: .6;
}
.socialContact {
display: flex;
margin: 1em auto;
}
.socialLink {
background: #fafafa;
width: 40px;
height: 40px;
margin: 1em 0.625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.socialFB {
font-size: 1.5rem;
color: #4267b2;
padding: 1em;
}
.socialTwitter {
font-size: 1.5rem;
color: #1da1f2;
padding: 1em;
}
.socialInsta {
font-size: 1.5rem;
color: #000;
padding: 1em;
}
.hamburger-btn {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.hamburger-btn_burger {
width: 20px;
height: 3px;
background: #fff;
margin: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn_burger::before,
.hamburger-btn_burger::after {
content: '';
position: absolute;
width: 20px;
height: 3px;
background: #fff;
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn_burger::before {
transform: translateY(-7px);
}
.hamburger-btn_burger::after {
transform: translateY(7px);
}
.hamburger-btn.open .hamburger-btn_burger {
transform: translateX(-50px);
background: transparent;
}
.hamburger-btn.open .hamburger-btn_burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger-btn.open .hamburger-btn_burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
#media screen and (min-width: 768px) {
.navBar {
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.navList {
width: 80%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.navItem {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 2em;
}
.navLink {
font-size: 1rem;
color: #fff;
cursor: pointer;
display: inline-block;
margin: 0 70px 0 0;
text-align: left;
border-bottom-style: none;
padding: 0;
}
.navbrand {
margin-bottom: 1em;
}
.logo {
margin-top: 0;
}
.hamburger-btn {
display: none;
}
.socialContact {
display: none;
}
.logo:focus {
color: #ff0000;
opacity: .1;
}
.logo:hover {
color: #ff0000;
}
}
<nav class="navBar">
<div class="navbrand">
XandY Junior School
</div>
<div class="hamburger-btn">
<div class="hamburger-btn_burger"></div>
</div>
<ul class="navList">
<li class="navItem">
</li>
<li class="navItem">
Our Story
</li>
<li class="navItem">
Sports & Clubs
</li>
<li class="navItem">
Admissions
</li>
<li class="navItem">
Parents
</li>
<li class="navItem">
BOSA
</li>
<li class="navItem">
Contact Us
</li>
<li class="socialContact">
<i class="fab fa-facebook-f socialFB"></i>
<i class="fab fa-twitter socialTwitter"></i>
<i class="fab fa-instagram socialInsta"></i>
</li>
</ul>
</nav>

You are correct clip-path is on of the issues. But background is also an issue as its overlapping the existing content when clip-path is removed
I was able to see your "navlist" items using below css. Commented background, clip-path & Padding
.navList {
position: absolute;
/* background: #003300; */
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
/* clip-path: circle(100px at 90% -10%); */
/* -webkit-clip-path: circle(100px at 90% -10%); */
transition: all 1s ease-out;
pointer-events: none;
/* padding-top: 9em; */
}
Although, I'm not able to see the Navbar in mobile mode also, when I use dev-tools.

it won't display on the large screens as per "bootstrap" for making the nav-bar not displayed with using display:none css class in the large screen.
so i will recommend for you to not use nav-bar from bootstrap and you can easily do it with html - css.

$(document).ready(function(){
$(".hamburger-btn").click(function(){
$(".navList").toggle();
});
});
body{
margin: 0;
padding: 0;
}
.navbrand {
display: block;
background: darkgreen;
padding: 10px;
}
.logo {
padding: 10px;
color: #fff;
text-decoration: none;
}
.hamburger-btn {
position: absolute;
top: -50px;
right: -3px;
background: darkgreen;
width: 150px;
height: 150px;
border-radius: 150px;
}
.hamburger-btn_burger {
width: 30px;
height: 4px;
background: #fff;
display: block;
position: absolute;
bottom: 77px;
right: 60px;
}
.hamburger-btn_burger::before{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
top: -8px;
z-index: 9;
}
.hamburger-btn_burger::after{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
bottom: -8px;
z-index: 9;
}
.navList{
display: none;
background: darkgreen;
padding: 15px;
position: absolute;
top: 22px;
width: 100%;
z-index: 1;
}
.navList li{list-style: none;display: block;}
.navList li a{display: block; color: #fff; text-decoration: none; padding: 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navBar">
<div class="navbrand">
XandY Junior School
</div>
<div class="hamburger-btn">
<div class="hamburger-btn_burger"></div>
</div>
<ul class="navList">
<li class="navItem">
About Us
</li>
<li class="navItem">
Our Story
</li>
<li class="navItem">
Sports & Clubs
</li>
<li class="navItem">
Admissions
</li>
<li class="navItem">
Parents
</li>
<li class="navItem">
BOSA
</li>
<li class="navItem">
Contact Us
</li>
<li class="socialContact">
<i class="fab fa-facebook-f socialFB"></i>
<i class="fab fa-twitter socialTwitter"></i>
<i class="fab fa-instagram socialInsta"></i>
</li>
</ul>
</nav>
Can you please look at this code...