CODEWITHSUNDEEP
javascripthtmlcss
averagestudent
averagestudent

Reputation: 7

Dropdown menu doesn't move content

so basically I kinda need my header when I use my dropdown menu to move my content below the dropdown menu since it's just over it and it gets in the way a bit.

So I'd like to ask about your opinion on what should I do to move it below my dropdown menu since it just doesn't look good like this and its not really appropriate like this

* {
  text-decoration: none;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
}

.logo {
  float: left;
}

.nav {
  text-align: right;
  height: 100px;
  line-height: 100px;
  flex: 10;
}

.menu {
  margin: 0 30px 0 0;
  margin-top: 10px;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 70px;
  font-size: 20px;
  margin-top: 10px;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
  margin-top: 10px;
}

#toggle {
  display: none;
}

.icons {
  display: flex;
  float: right;
}

h3,
h4,
h2 {
  font-family: 'Roboto', sans-serif;
}

section {
  text-align: center;
  align-items: center;
  align-self: center;
  align-content: center;
}

@media only screen and (max-width:820px) {
  .logo {
    width: 1%;
  }
  label {
    display: block;
    cursor: pointer;
    margin-top: 10px;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    background-color: white;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
  .icons {
    display: inline-block;
    width: 100%;
  }
}

@media only screen and (max-width:250px) {
  * {
    visibility: hidden;
  }
}
<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="logo.png" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <title>Something</title>
</head>

<body>
  <header>
    <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

    <div class="nav">

      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle">


      <div class="menu">
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <div class="icons">
          <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
          <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
          <a href="mailto:[email protected]"><i class="far fa-envelope"></i></a>
        </div>
      </div>
    </div>

  </header>
  <section class="Everything">
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>

        <p>
          Something, something, something...
        </p>
      </a>
    </div>
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>
        <p>Something, something, something...</p>
      </a>
    </div>
  </section>
</body>

</html>

Upvotes: 0

Views: 408

Answers (1)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

You have a fixed height for .nav which is the container for .menu so whenever you open .menu, the height will not change also the .menu will not push the content since you already declared

.nav { 
  height: 100px
}

The solution is to put min-height instead of height, check below:

* {
    text-decoration: none;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

.logo {
    float: left;
}

.nav {
    text-align: right;
    min-height: 100px;
    line-height: 100px;
    flex: 10;
}

.menu {
    margin: 0 30px 0 0;
    margin-top: 10px;
}

.menu a {
    clear: right;
    text-decoration: none;
    color: gray;
    margin: 0 10px;
    line-height: 70px;
    font-size: 20px;
    margin-top: 10px;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    margin-top: 10px;
}

#toggle {
    display: none;
}

.icons {
    display: flex;
    float: right;
}

h3,
h4,
h2 {
    font-family: 'Roboto', sans-serif;
}

section {
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
}

@media only screen and (max-width:820px) {
    .logo {
        width: 1%;
    }
    label {
        display: block;
        cursor: pointer;
        margin-top: 10px;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a {
        display: block;
        background-color: white;
        margin: 0;
    }
    #toggle:checked+.menu {
        display: block;
    }
    .icons {
        display: inline-block;
        width: 100%;
    }
}

@media only screen and (max-width:250px) {
    * {
        visibility: hidden;
    }
}
<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="logo.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <title>Something</title>
</head>

<body>
    <header>
        <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

        <div class="nav">

            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">


            <div class="menu">
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <div class="icons">
                    <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
                    <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
                    <a href="mailto:[email protected]"><i class="far fa-envelope"></i></a>
                </div>
            </div>
        </div>

    </header>
    <section class="Everything">
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>

                <p>
                    Something, something, something...
                </p>
            </a>
        </div>
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>
                <p>Something, something, something...</p>
            </a>
        </div>
    </section>
</body>

</html>

Upvotes: 1

Related Questions