{ display: none;} Doesn't work

HTML-CSS
1

I need help… I’m following a tutorial on YouTube, trying to build a restaurant website. Everything is fine until this point. I don’t understand why I can’t get display: none; to work. Is there a problem in the code?

My full HTML CSS JS:

<!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">

  <!--META TAGS-->
    
  <title>Pupelė</title>
  <meta name="title" content="Pupelė - vieta istorijoms, pašnekesiams, kurių vertės neišmatuosi.">
  <meta name="description" content="X">

  <!--GOOGLE FONTS-->

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Forum&display=swap" rel="stylesheet">

  <!--CSS-->

  <link rel="stylesheet" href="./assets/css/style.css">

  <!--FAVICON-->

  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!--PRELOAD-->

  <link rel="preload" as="image" href="assets/images/hero-slider-1.jpg">

</head>

<body>

  <!--PRELOADER-->

  <div class="preload" data-preload>
    <div class="circle"></div>
    <p class="text">Pupelė</p>
  </div>


  <!--TOPBAR-->

  <div class="topbar">
    <div class="container">

      <address class="topbar-item">
        <div class="icon">
          <ion-icon name="location-outline" aria-hidden="true"></ion-icon>
        </div>  

        <span class="span">Nepriklausomybės a. 12, 42115 Rokiškis, LT</span>
      </address>

      <div class="separator"></div>

      <div class="topbar-item item-2">
        <div class="icon">
          <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
        </div>

        <span class="span">Daily : 8.00 am to 10.00 primary</span>
      </div>

      <a href="tel:+11234567890" class="topbar-item link">
        <div class="icon">
          <ion-icon name="call-outline" aria-hidden="true"></ion-icon>
        </div>
  
        <span class="span">+370 611 08602</span>
      </a>

      <div class="separator"></div>

      <a href="mailto:booking@restaurant.com" class="topbar-item link">
        <div class="icon">
          <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
        </div>
  
        <span class="span">info.pupele@gmail.com</span>
      </a>

    </div>
  </div>


  <!--HEADER-->

  <header class="header" data-header>

    <div class="container">

      <a href="#" class="logo">
        <img src="assets/images/Logo.svg" alt="Pupelė - Pagrindinis" width="90" height="50">
      </a>

      <nav class="navbar">
        <button class="close-btn" aria-label="close menu" data-nav-toggler></button>
      </nav>

      <a href="#" class="logo">
        <img src="assets/images/Logo.svg" alt="Pupelė - Pagrindinis" width="90" height="50">
      </a>

      <ul class="navbar-list">

        <li class="navbar-item">
          <a href="#Pagrindinis" class="navbar-link hover-underline active">
            <div class="separator"></div>

            <span class="span">Pagrindinis</span>
          </a>
        </li>

        <li class="navbar-item">
          <a href="#Meniu" class="navbar-link hover-underline active">
            <div class="separator"></div>

            <span class="span">Meniu</span>
          </a>
        </li>

        <li class="navbar-item">
          <a href="#Istorija" class="navbar-link hover-underline active">
            <div class="separator"></div>

            <span class="span">Istorija</span>
          </a>
        </li>

        <li class="navbar-item">
          <a href="#Galerija" class="navbar-link hover-underline active">
            <div class="separator"></div>

            <span class="span">Galerija</span>
          </a>
        </li>

        <li class="navbar-item">
          <a href="#Kontaktai" class="navbar-link hover-underline active">
            <div class="separator"></div>

            <span class="span">Kontaktai</span>
          </a>
        </li>

      </ul>

      <div class="text-center">
          <p class="headline-1 navbar-title">Visit Us</p>

          <address class="body-4">
            Restaurant St, Delicious City, <br>
            London 9578, UK
          </address>

          <p class="body-4 navbar-text">Open: 9.30 am - 2.30pm</p>

          <a href="mailto:booking@grilli.com" class="body-4 sidebar-link">booking@grilli.com</a>

          <div class="separator"></div>

          <p class="contact-label">Booking Request</p>

          <a href="tel:+88123123456" class="body-1 contact-number hover-underline">
            +88-123-123456
          </a>
        </div>

      </nav>

      <a href="#" class="btn btn-secondary">
        <span class="text text-1">Find A Table</span>

        <span class="text text-2" aria-hidden="true">Find A Table</span>
      </a>

      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
        <span class="line line-1"></span>
        <span class="line line-2"></span>
        <span class="line line-3"></span>
      </button>

      <div class="overlay" data-nav-toggler data-overlay></div>

    </div>

  </header>


  <!--JAVASCRIPT-->


  <script src="assets/js/script.js"></script>
  
  <!--IONICON-->

  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</body>

</html>

/*-----------------------------------*\
  #index.css
\*-----------------------------------*/

/*CUSTOM*/

:root {

    /*COLORS*/
  
    --gold-crayola: hsl(38, 61%, 73%);
    --quick-silver: hsla(0, 0%, 65%, 1);
    --davys-grey: hsla(30, 3%, 34%, 1);
    --smoky-black-1: hsla(40, 12%, 5%, 1);
    --smoky-black-2: hsla(30, 8%, 5%, 1);
    --smoky-black-3: hsla(0, 3%, 7%, 1);
    --eerie-black-1: hsla(210, 4%, 9%, 1);
    --eerie-black-2: hsla(210, 4%, 11%, 1);
    --eerie-black-3: hsla(180, 2%, 8%, 1);
    --eerie-black-4: hsla(0, 0%, 13%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --white-alpha-20: hsla(0, 0%, 100%, 0.2);
    --white-alpha-10: hsla(0, 0%, 100%, 0.1);
    --black: hsla(0, 0%, 0%, 1);
    --black-alpha-80: hsla(0, 0%, 0%, 0.8);
    --black-alpha-15: hsla(0, 0%, 0%, 0.15);
  
    /**GRADIENT COLOR*/
  
    --loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--smoky-black-3) 33.33% 50%,  transparent 66.66% 75%);
    --gradient-1: linear-gradient(to top,hsla(0, 0%, 0%, 0.9),hsla(0, 0%, 0%, 0.7),transparent);
  
    /**TYPOGRAPHY*/
  
    /* font-family */
    --fontFamily-forum: 'Forum', cursive;
    --fontFamily-dm_sans: 'DM Sans', sans-serif;
  
    /* font-size */
    --fontSize-display-1: calc(1.3rem + 6.7vw);
    --fontSize-headline-1: calc(2rem + 2.5vw);
    --fontSize-headline-2: calc(1.3rem + 2.4vw);
    --fontSize-title-1: calc(1.6rem + 1.2vw);
    --fontSize-title-2: 2.2rem;
    --fontSize-title-3: 2.1rem;
    --fontSize-title-4: calc(1.6rem + 1.2vw);
    --fontSize-body-1: 2.4rem;
    --fontSize-body-2: 1.6rem;
    --fontSize-body-3: 1.8rem;
    --fontSize-body-4: 1.6rem;
    --fontSize-label-1: 1.4rem;
    --fontSize-label-2: 1.2rem;
  
    /* font-weight */
    --weight-regular: 400;
    --weight-bold: 700;
  
    /* line-height */
    --lineHeight-1: 1em;
    --lineHeight-2: 1.2em;
    --lineHeight-3: 1.5em;
    --lineHeight-4: 1.6em;
    --lineHeight-5: 1.85em;
    --lineHeight-6: 1.4em;
  
    /* letter-spacing */
    --letterSpacing-1: 0.15em;
    --letterSpacing-2: 0.4em;
    --letterSpacing-3: 0.2em;
    --letterSpacing-4: 0.3em;
    --letterSpacing-5: 3px;
  
    /*SPACING*/
  
    --section-space: 70px;
  
    /**SHADOW*/
  
    --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
  
    /*BORDER RADIUS*/
  
    --radius-24: 24px;
    --radius-circle: 50%;
  
    /**TRANSITION*/
  
    --transition-1: 250ms ease;
    --transition-2: 500ms ease;
    --transition-3: 1000ms ease;
  
  }
  
  
  
  
  /*RESET*/

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li { list-style: none; }

  a,
  img,
  data,
  span,
  input,
  button,
  select,
  ion-icon,
  textarea { display: block; }

  a {
    color: inherit;
    text-decoration: none;
  }

  img { height: auto; }

  input,
  button,
  select,
  textarea {
    background: none;
    border: none;
    font: inherit;
  }

  input,
  select,
  textarea {
    height: 100%;
    outline: none;
  }

  button { cursor: pointer; }

  address { font-style: normal;}

  html {
    font-size: 10px;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--eerie-black-1);
    color: var(--white);
    font-family: var(--fontFamily-dm_sans);
    font-size: var(--fontSize-body-4);
    font-weight: var(--weight-regular);
    line-height: var(--lineHeight-5);
    overflow: hidden;
    height: 300vh;
  }

  body.loaded { overflow: overlay;}

  body.nav-active { overflow: hidden;}

  ::-webkit-scrollbar { width: 5px;}

  ::-webkit-scrollbar-track { background: transparent;}

  ::-webkit-scrollbar-thumb { background-color: var(--gold-crayola);}

  /*TYPOGRAPHY*/

  .display-1,
  .headline-1,
  .headline-2,
  .title-1,
  .title-2,
  .title-3,
  .title-4 {
    color: var(--white);
    font-family: var(--fontFamily-forum);
    font-weight: var(--weight-regular);
    line-height: var(--lineHeight-2);
  }

  .display-1 {
    font-size: var(--fontSize-display-1);
    line-height: var(--lineHeight-1);
  }

  .headline-1 { font-size: var(--fontSize-headline-1);}

  .headline-2 {
    font-size: var(--fontSize-headline-2);
    line-height: var(--lineHeight-6);
  }

  .title-1 { font-size: var(--fontSize-title-1);}

  .title-2 { font-size: var(--fontSize-title-2);}

  .title-3 { font-size: var(--fontSize-title-3);}

  .title-4 { font-size: var(--fontSize-title-4);}

  .body-1 {
    font-size: var(--fontSize-body-1);
    line-height: var(--lineHeight-6);
  }

  .body-2 {
    font-size: var(--fontSize-body-2);
    line-height: var(--lineHeight-4);
  }

  .body-3 { font-size: var(--fontSize-body-3);}
  
  .body-4 { font-size: var(--fontSize-body-4);}


  /*REUSED*/

  .container { padding-inline: 16px; }

  .separator {
    width: 8px;
    height: 8px;
    border: 1px solid var(--gold-crayola);
    transform: rotate(45deg);
  }
  
  .contact-label { font-weight: var(--weight-bold); }

  .contact-number {
    color: var(--gold-crayola);
    max-width: max-content;
    margin-inline: auto;
  }

  .hover-underline {
    position: relative;
    max-width: max-content;
  }

  .hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-block: 1px solid var(--gold-crayola); 
    transform: scaleX(0.2);
    opacity: 0;
    transition: var(--transition-2);
  }

  .hover-underline:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .contact-number::after { bottom: -5px; }

  /*PRELOAD*/


  .preload {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--gold-crayola);
    z-index: 10;
    display: grid;
    place-content: center;
    justify-items: center;
    transition: var(--transition-2);
  }

  .preload > * { transition: var(--transition-1); }

  .preload.loaded > * { opacity: 0; }

  .preload.loaded {
    transition-delay: 250ms;
    transform: translateY(100%);
  }

  .circle {
    width: 112px;
    height: 112px;
    border-radius: var(--radius-circle);
    border: 3px solid var(--white);
    border-block-start-color: var(--smoky-black-3);
    margin-block-end: 45px;
    animation: rotate360 1.2s linear infinite;
  }

  @keyframes rotate360 {
    0% { transform: rotate(0); }
    100% {transform: rotate(1turn);}
  }

  .preload .text {
    background-image: var(--loading-text-gradient);
    background-size: 500%;
    font-size: calc(2rem + 3vw);
    font-weight: var(--weight-bold);
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 16px;
    padding-inline-start: 16px;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.5px var(--eerie-black-3);
    animation: LoadingText linear 2s infinite;
  }

  @keyframes LoadingText {
    0% { background-position: 100%; }
    100% { background-position: 0%;}
  }


  /*TOPBAR*/
  
  .topbar { display: none;}

  /*HEADER*/

  .navbar,
  .overlay,
  .header .btn { display: none;}

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    padding-block: 40px;
    z-index: 4;
    border-block-end: 1px solid transparent;
    transition: var(--transition-1);
  }

  .header.active {
    padding-block: 20px;
    background-image: var(--eerie-black-4);
    border-color: var(--black-alpha-15);
  }

  .header.hide {
    transform: translateY(-100%);
    transition-delay: 250ms;
  }
  
  .header .container {
    padding-inline: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .nav-open-btn {
    padding: 12px;
    padding-inline-end: 0;
  }

  .nav-open-btn .line {
    width: 30px;
    height: 2px;
    background-color: var(--white);
    margin-block: 4px;
    transform-origin: left;
    animation: menuBtn 400ms ease-in-out alternate infinite;
  }

  @keyframes menuBtn {
    0% { transform: scaleX(1);}
    100% {transform: scaleX(0);}
  }

'use strict';


/*PRELOAD*/

const preloader = document.querySelector("[data-preload]");

window.addEventListener("load", function() {
    preloader.classList.add("loaded");
    document.body.classList.add("loaded");
});
2

I don’t know which one is display: none do u mean. Can you be more specific please, if not we can’t help. Maybe you can highlight the code you mean!

Ahh, you can go first @bbsmooth :blush: :blush:

3

Can you be a little more specific. There are several elements with display: none. Which one are you asking about? And what are you trying to do?

Ahh, I see @nurularifin83 beat me to it :slightly_smiling_face:

4

Sorry for not being very specific, I’ve been sitting and rechecking the code for quite a while now… I needed help with
.navbar,
.overlay,
.header .btn { display: none;}

But found a mistake in my html, I closed the element twice.

2 Likes
5

Happy to hear you solved it.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.