Why does my <ul> become hidden in desktop mode? - html-lists

Question

Sorry if this question has already been asked, I don't find anything similar.
So I am following a course and I have created the mobile navbar, which works. Then I write the mediaquery for larger screens and the list, instead of being displayed to the right of the navbar, is hidden.
If I inspect the page I can see that the list and the list items are on the right spot, but they are not visible. I have tried with "visibility: visible" but it doesnt' work.
Where is the mistake?
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);
/* Typography */
html {
font-size: 62.5%;
}
:root {
--color-primary: #2584ff;
--color-secondary: #00d9ff;
--color-accent: #ff3400;
--color-headings: #1b0760;
--color-body: #918ca4;
--color-border: #ccc;
--border-radius: 30px;
--color-body-darker: #5c5577;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 2.4rem;
line-height: 1.5;
color: var(--color-body);
}
h1,
h2,
h3 {
color: var(--color-headings);
margin-bottom: 1rem;
}
h1 {
font-size: 7rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
}
p {
margin-top: 0;
}
#media screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
}
h1 {
font-size: 8rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 2.4rem;
}
}
/* Links */
a {
text-decoration: none;
}
.link-arrow {
color: var(--color-accent);
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
}
.link-arrow::after {
content: "-->";
margin-left: 5px;
transition: margin 0.15s;
}
.link-arrow:hover::after {
margin-left: 10px;
}
#media screen and (min-width: 1024px) {
.link-arrow {
font-size: 1.5rem;
}
}
/* Badges */
.badge {
border-radius: 20px;
font-size: 2rem;
font-weight: 600;
padding: 0.5rem 2rem;
white-space: nowrap;
}
.badge--primary {
background: var(--color-primary);
color: white;
}
.badge--secondary {
background: var(--color-secondary);
color: white;
}
.badge--small {
font-size: 1.6rem;
padding: 0.5rem 1.5rem;
}
#media screen and (min-width: 1024px) {
.badge {
font-size: 1.5rem;
}
.badge--small {
font-size: 1.2rem;
}
}
/* Lists */
.list {
list-style: none;
padding-left: 0;
color: var(--color-headings);
}
.list--inline .list__item {
display: inline-block;
margin-right: 2rem;
}
.list--tick {
list-style-image: url(/images/tick.svg);
padding-left: 3rem;
}
.list--tick .list__item {
padding-left: 0.5rem;
margin-bottom: 1rem;
}
#media screen and (min-width: 1024px) {
.list--tick .list__item {
padding-left: 0;
}
}
/* Icons */
.icon {
width: 40px;
height: 40px;
}
.icon--small {
width: 30px;
height: 30px;
}
.icon--primary {
fill: var(--color-primary);
}
.icon--white {
fill: white;
}
.icon-container {
background: #f3f9fa;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-container--accent {
background: var(--color-accent);
}
/* Buttons */
.btn {
border-radius: 40px;
border: none;
cursor: pointer;
font-size: 1.8rem;
font-weight: 600;
margin-left: 5px;
margin-top: 5px;
padding: 2rem 3rem;
text-transform: uppercase;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-primary);
color: white;
}
.btn--primary:hover {
background: #8a91f3;
}
.btn--secondary {
background-color: var(--color-secondary);
color: white;
}
.btn--accent {
background-color: var(--color-accent);
color: white;
}
.btn--accent:hover {
background: #e66545;
}
.btn--outline {
background-color: white;
color: black;
border: 2px solid var(--color-headings);
}
.btn--block {
display: inline-block;
width: 100%;
}
.btn--stretched {
padding-left: 6rem;
padding-right: 6rem;
}
/* Input */
.input {
border-radius: 30px;
border: 1px solid #ccc;
color: var(--color-headings);
font-size: 2rem;
outline: 0;
padding: 1.5rem 3.5rem;
}
::placeholder {
color: #cdcbd7;
}
.input-group {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: flex;
}
.input-group .input {
border: 0;
flex-grow: 1;
padding: 1rem 1rem;
}
.input-group .btn {
margin: 4px;
}
#media screen and (min-width: 1024px) {
.input {
font-size: 1.5rem;
}
}
/* Cards */
.card {
border-radius: 7px;
box-shadow: 0 0 20px 10px #f3f3f3;
overflow: hidden;
min-width: 300px;
}
.card__header,
.card__body {
padding: 2rem 3rem;
}
.card--primary .card__header {
background: var(--color-primary);
color: #fff;
}
.card--secondary .card__header {
background: var(--color-secondary);
color: #fff;
}
.card--secondary .badge--secondary {
background: #02cdf1;
}
/* Plans */
.plan__name {
color: #fff;
margin: 0;
font-weight: 500;
font-size: 2.4rem;
}
.plan__price {
font-size: 6rem;
}
.plan__billing-cycle {
font-size: 2.4rem;
font-weight: 300;
opacity: 0.8;
margin-right: 1rem;
}
.plan__description {
font-size: 2rem;
font-weight: 300;
letter-spacing: 1px;
display: block;
}
.plan .list__item {
margin-bottom: 2rem;
}
.plan--popular .card__header {
position: relative;
}
.plan--popular .card__header::before {
content: url(/images/popular.svg);
width: 40px;
display: inline-block;
position: absolute;
top: -6px;
right: 5%;
}
#media screen and (min-width: 1024px) {
.plan__name {
font-size: 1.4rem;
}
.plan__price {
font-size: 5rem;
}
.plan__billing-cycle {
font-size: 1.6rem;
}
.plan__description {
font-size: 1.7rem;
}
}
/* Media */
.media {
display: flex;
max-width: 500px;
}
.media__title {
margin-top: 0;
}
.media__body {
margin: 0 2rem;
}
.media__image {
margin-top: 1rem;
}
/* Quotes */
.quote {
font-size: 3rem;
font-style: italic;
color: var(--color-body-darker);
line-height: 1.3;
}
.quote__text::before {
content: open-quote;
}
.quote__text::after {
content: close-quote;
}
/* footer p {
font-size: 1.6rem;
}
*/
.quote__company {
font-size: 1.6rem;
opacity: 0.4;
color: var(--color-headings);
font-style: normal;
}
/* Grids */
.grid {
display: grid;
}
#media screen and (min-width: 768px) {
.grid--1x2 {
grid-template-columns: 1fr 1fr;
}
}
#media screen and (min-width: 1024px) {
.grid--1x3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* testimonials */
.testimonial {
padding: 3rem;
}
.testimonial__image {
position: relative;
}
.testimonial__image > img {
width: 100%;
}
.testimonial__image > .icon-container {
position: absolute;
top: 3rem;
right: -32px;
}
/* Callout */
.callout {
padding: 4rem;
border-radius: 5px;
}
.callout--primary {
background: var(--color-primary);
color: white;
}
.callout__heading {
color: white;
margin-top: 0;
font-size: 3rem;
}
.callout .btn {
justify-self: center;
align-self: center;
}
.callout__content {
text-align: center;
}
#media screen and (min-width: 768px) {
.callout .grid--1x2 {
grid-template-columns: 1fr auto;
}
.callout__content {
text-align: left;
}
.callout .btn {
justify-self: start;
margin: 0 2rem;
}
}
/* COLLAPSIBLES */
.collapsible__header {
display: flex;
justify-content: space-between;
}
.collapsible__heading {
margin-top: 0;
font-size: 3rem;
}
.collapsible__chevron {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.collapsible__content {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
opacity: 0;
}
.collapsible--expanded .collapsible__chevron {
transform: rotate(0);
}
.collapsible--expanded .collapsible__content {
display: block;
max-height: 100vh;
opacity: 1;
}
/* Blocks */
.block {
--padding-vertical: 6rem;
padding: var(--padding-vertical) 2rem;
}
.block__heading {
margin-top: 0;
}
.block--dark {
background: black;
color: #7b858b;
}
.block--dark .block__heading {
color: white;
}
.block--skewed-right {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block--skewed-left {
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block__header {
text-align: center;
}
/* nav */
.nav {
background: black;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1rem;
align-items: center;
}
.nav__list {
width: 100%;
margin: 0;
}
.nav__item {
padding: 0.5rem 2rem;
border-bottom: 1px solid #222;
}
.nav__item > a {
color: #d2d0db;
transition: color 0.3s;
}
.nav__item > a:hover {
color: #fff;
}
.nav__toggler {
opacity: 0.5;
transition: box-shadow 0.15s;
cursor: pointer;
}
.nav.collapsible--expanded .nav__toggler {
opacity: 1;
box-shadow: 0 0 0 3px #666;
border-radius: 5px;
}
#media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
width: auto;
display: flex;
visibility: ;
}
}
<!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>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<nav class="nav collapsible">
<img src="/images/logo.svg" alt="" />
<svg class="icon icon--white nav__toggler">
<use xlink:href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item">Hosting</li>
<li class="nav__item">VPS</li>
<li class="nav__item">Domain</li>
<li class="nav__item">Pricing</li>
</ul>
</nav>
<script src="/js/main.js"></script>
</body>
</html>

Answer 1

Problem was solved by adding max-height: 100%; opacity:1 to the .nav__list rule in CSS.