simple css - background color occupy 100% item horizontally from list

Asked

Viewed 77 times

-1

Hi, I’m trying to make the color of background-color of item li:hover occupy 100% of the width of the screen when opened by a screen smaller than 480px, I tried to leave the width of the padding at 100%, but the items were outside the screen.

How are you:

inserir a descrição da imagem aqui

As I wish:

inserir a descrição da imagem aqui

* {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

:root {
    --texto-branco: #f2f2f2;
    --fundo-preto:#262626;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--fundo-preto);
    box-sizing: border-box;
}

.logo {
    margin: 16px; 
}

.bar {
    display: none;

}

li {
    display: inline-block;
    padding: 21px 16px;
    transition: 0.3s;
}
li:hover {
    background-color: #009DFF;
}

a {
    text-decoration: none;
    color: var(--texto-branco);
}


@media  (max-width: 480px) {
    .bar {
        display: inline-block;
        cursor: pointer;
        margin: 16px;
    }

    nav {
        align-items: flex-start;
    }

    nav ul {
        margin-top: 64px;
    }

    li {
        display: block;
        text-align: center;
    }
} 
<html lang="pt-br">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <script src="https://kit.fontawesome.com/a3703589d3.js" crossorigin="anonymous"></script>
      <title>VM Design</title>
  </head>
  <body>
      <nav>
          <a class="logo" href="#">VM</a>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Projetos</a></li>
              <li><a href="#" class="fale_comigo">Fale Comigo</a></li>
          </ul>
          <a href="#" class="bar"><i class="fas fa-bars"></i></a>
      </nav>
  </body>
</html>

html css

1 answer

1

You can solve this by putting the properties position: absolute; and width: 100% in the element <ul> and set a height height: 318px; for the element <nav> since the element <ul> will be in absolute position and for the list items to be aligned horizontally correct remove the left and right fills from the element <li> (padding: 21px 0;) all this within the rule @media (max-width: 480px) already existing in your code:

@media (max-width: 480px) {
    /* ... */
    nav {
        height: 318px;
    }

    ul {
        width: 100%;
        position: absolute;
    }

    li {
        padding: 21px 0;
    }
    /* ... */
}

Demonstration:

inserir a descrição da imagem aqui

Upshot:

<html lang="pt-br">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <script src="https://kit.fontawesome.com/a3703589d3.js" crossorigin="anonymous"></script>
      <title>VM Design</title>
      <style>
          * {
            padding: 0;
            margin: 0;
            font-family: 'Open Sans', sans-serif;
        }

        :root {
            --texto-branco: #f2f2f2;
            --fundo-preto:#262626;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--fundo-preto);
            box-sizing: border-box;
        }

        .logo {
            margin: 16px; 
        }

        .bar {
            display: none;
        }

        li {
            display: inline-block;
            padding: 21px 16px;
            transition: 0.3s;
        }

        li:hover {
            background-color: #009DFF;
        }

        a {
            text-decoration: none;
            color: var(--texto-branco);
        }


        @media  (max-width: 480px) {
            .bar {
                display: inline-block;
                cursor: pointer;
                margin: 16px;
            }

            nav {
                align-items: flex-start;
                height: 318px;
            }

            ul {
                width: 100%;
                position: absolute;
            }

            li {
                padding: 21px 0;
            }

            nav ul {
                margin-top: 64px;
            }

            li {
                display: block;
                text-align: center;
            }
        } 
      </style>
  </head>
  <body>
      <nav>
          <a class="logo" href="#">VM</a>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Projetos</a></li>
              <li><a href="#" class="fale_comigo">Fale Comigo</a></li>
          </ul>
          <a href="#" class="bar"><i class="fas fa-bars"></i></a>
      </nav>
  </body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.