HTML - moving menu image

0

Good afternoon!

I am training to build a website, and when I minimize the screen, the menu bar that is an image moves and leaves the position (it rises). I would like it to stay fixed and fit the screen size.

Note: I'm still not making a responsive site. This will be the next step.

Could you help me with a tip? Thank you.

SEE HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>

    <title>RIO.TEC - Amortecedores, Kit de embreagem, mangas de eixo, caixa de direção"</title>
    <link rel="stylesheet" type="text/css" href="css/CSSReset.css">
    <link rel="stylesheet" type="text/css" href="css/estilo_home.css">

    <meta charset="UTF-8">
</head>

<body>
    <header>
        <div id="imgtopo">
            <address>
                <p><strong>Endereço:</strong></p>
                <p>Estrada de qualquer coisa, nº 999 <br> Bairro - Rio de Janeiro/RJ <br> CEP: 33.333-333<br><br></p>
                <p><strong>Telefone: (21) 3333-3333<br>
                Celular: (21) 9999-9999</strong> (Whatsapp)</p>
            </address>
        </div>


        <nav id="imgmenu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>

    </header>
    <main>
        <section id="empresa">
            <h1>Sobre a empresa</h1>
            <p>Aqui vai o texto sobre a empresa. <br> Aqui vai o texto sobre a empresa.
            <br> Aqui vai o texto sobre a empresa. Aqui vai o texto sobre a empresa.
            <br> Aqui vai o texto sobre a empresa. Aqui vai o texto sobre a empresa.</p>
        </section>

        <section id="produtos">
            <h1>Produtos</h1>
            <ul>
                <li>Produto 1</li>
                <li>Produto 2</li>
                <li>Produto 3</li>
                <li>Produto 4</li>
                <li>Produto 5</li>
                <li>Produto 6</li>
                <li>Produto 7</li>
            </ul>
        </section>

        <footer>
            <section id="copyright">
                <hr>
                <h6>Copyright - Todos os direitos reservados. | 
            Desenvolvido por: <a href="mailto:[email protected]">[email protected]</a></h6>

            </section>
        </footer>
    </main>
</body>

</html>

SEE CSS:

@charset "UTF-8";

/*Estrutura da página*/
html, body { 
    width:100%;
    height: 100%;
    font-size: 16px;
    font-family: Verdana, Liberation;
}


header{
    width:100%;
    height:30%;
}

main{
    width:100%;
    height:70%;
}

/*
===================================
HEADER e menu
===================================
*/

#imgtopo {
    background-image: url(../img/topo.png);
    background-size:cover;
    background-repeat:no-repeat;
    position:absolute;
    width:100%;
    height: 25%;
    z-index: 1;
}


address {
    font-size: 12px;
    color: #333;
    text-align: left;
    margin: 1% 2%;
    float: right;
    position: relative;
    z-index: 2;
}

address p{
    margin:0%;
}

p strong{
    font-style:italic;
    font-weight:bold;   
}

#imgmenu {
    background-image: url(../img/menu.png);
    background-size:cover;
    background-repeat: no-repeat;
    text-align: center;
    position: absolute;
    float: left;
    width: 100%;
    height: 5%;
    margin-top:11.5%;
    z-index: 3; 
}

#imgmenu ul {
    padding:0px;
    margin:0px -10px 0px 40px;
    background-color:none;
    list-style:none;
}

#imgmenu ul li {
    display: inline;

}

#imgmenu ul li a {
    padding: 0px 100px;
    display: inline-block;
    background-color:none;
    color: #333;
    text-decoration: none;
    border-bottom:0px solid #000000;
}

a:hover { 
    background-color: #6E6E6E;
    font-weight: bold;
    font-size: 18px;
    margin: 0% 0% 0% 0%;
}

/*===================
Corpo da página
====================*/

#empresa{
    width:40%;
    font-color: grey;
    position:absolute;
    margin: 12% 0% 0% 2%;
    z-index:6;
    background-color:grey;
}

#produtos{
    float: left;
    width:50%;
    font-color: grey;
    padding: 0% 0% 0% 1%;
    position:absolute;
    margin: 12% 0% 0% 50%;
    z-index:6;
    background-color:grey;
}

#produtos ul li {
    margin-top:20px;
    margin-bottom:15px;

}


hr {
    width: 30%;
}

#copyright{
    width:100%;
    font-size:10px;
    position:absolute;
    bottom:0;
    text-align:center;
    padding-bottom:5px;
}
    
asked by anonymous 07.08.2018 / 21:34

1 answer

0

Good afternoon, I'm not very experienced in css, but I tried to solve your problem by changing the "position" value from "absolute to" fixed.

Try using the imgmenu css like this:

#imgmenu {
    background-image: url(../img/menu.png);
    background-size:cover;
    background-repeat: no-repeat;
    text-align: center;
    position: fixed;
    float: left;
    width: 100%;
    height: 5%;
    margin-top:11.5%;
    z-index: 3; 
}
    
07.08.2018 / 21:55