Kevin Powell - Community•2d ago

How do i get it so when the menu is checked the welcome message gets hidden

9 Replies

RIZE Hobberz•2d ago

the menu button is food menu btw the button

Chris Bolson•2d ago

It depends on how you actually want to hide it. The simplest method is just to use display: none;

#check:checked ~.welcome-msg{
  display: none;
}

#check:checked ~.welcome-msg{
  display: none;
}

This selector will of course only work if the "welcome-msg" element is a sibling of the checkbox.

RIZE Hobberz•2d ago

ive tried that im guessing its not a sibling

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>ADKAOFWKOAF - home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo">awdwadwadwa</label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="#">Opening Times</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Images</a></li>
    </ul>
  </nav>
  <body>
  <section></section>
  <div class="welcome-msg">
    <h1 style="margin-bottom: 30px;">Welcome To dwdwadwadwad Official Site!</h1>

    <a href="menu.html" class="menu-btn">MENU</a>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>ADKAOFWKOAF - home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo">awdwadwadwa</label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="#">Opening Times</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Images</a></li>
    </ul>
  </nav>
  <body>
  <section></section>
  <div class="welcome-msg">
    <h1 style="margin-bottom: 30px;">Welcome To dwdwadwadwad Official Site!</h1>

    <a href="menu.html" class="menu-btn">MENU</a>
  </div>
</body>
</html>

i cant send the css bcs its too long

RIZE Hobberz•2d ago

style.css

Chris Bolson•2d ago

ok, so the ~ selector will only work on siblings so you will need to adjust the selector. Firstly your <nav> needs to be within the body (this is just a copy & paste mistake). Then, as your checkbox is within a container, you won't be able to use a direct sibling selector however your could use the :has() selector on the parent (nav) and then use the sibling selector on that.

nav:has(#check:checked) ~ .welcome-msg{
  display: none;
}

nav:has(#check:checked) ~ .welcome-msg{
  display: none;
}

RIZE Hobberz•2d ago

okay cool im going to use opacity 0 but itll have the same effect surely oh wait it wont

Chris Bolson•2d ago

You can use opacity but bear in mind that it will still be there so it could interfere with the mouse etc. You could add pointer-events: none; to negate this. You could also add the :has() selector on the body and find the message element directly without worrying about siblings.

body:has(#check:checked) .welcome-msg{
  display: none;
}

body:has(#check:checked) .welcome-msg{
  display: none;
}

Gaming

Programming

How do i get it so when the menu is checked the welcome message gets hidden