How To Hide Show Elements Example

<!DOCTYPE html>
<html>
<head>
<title>Hide/Show Elements Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
  }
  .desktop-menu {
    /* Visible by default on large screens */
    display: block; 
  }
  .desktop-menu a {
    color: white;
    text-decoration: none;
    margin-left: 15px;
  }
  .mobile-menu-icon {
    /* Hidden by default on large screens */
    display: none; 
    font-size: 24px;
    cursor: pointer;
  }
  
  /* Switch visibility on screens 600px or smaller */
  @media (max-width: 600px) {
    .desktop-menu {
      display: none; /* Hide the full text menu */
    }
    .mobile-menu-icon {
      display: block; /* Show the hamburger icon */
    }
  }
</style>
</head>
<body>

<div class="header">
  <div class="logo"><strong>MyBrand</strong></div>
  
  
  <div class="desktop-menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
  </div>
  
  
  <div class="mobile-menu-icon">
    &#9776; 
  </div>
</div>

<p style="margin-top: 20px;">Try resizing your browser window! When the window is wider than 600px, you will see the text links. When it is narrower, the links will vanish, and the hamburger menu icon will appear in their place.</p>

</body>
</html>