Div's overlapping on mobile

Navigation
2

I have a menu made with CSS that has a certain header spacing as can be seen below:

However,whenIopenthephone,theylineupinawaythatendsupontopoftheheader:

Andwithout"Expremo" the page a little more, many of the buttons end up becoming inaccessible:

Thelastexampleendsupbeingalittleimpossibletohappen,buteventhenIwouldliketoknowawayto"force" the Divs to keep the distance of the header, the distance of the first image, regardless of the size of the screen. >

Follow the HTML and CSS of the header and menu (by running the code below, because the display area is small this error is occurring there too): 

/*Cabeçalho*/
#menu ul {
    padding:5px;
    margin:0px;  
    background-color: rgb(7, 58, 121);      
    list-style: none;
    width:99.85%;
    height: 50px ;
    position: relative;
}
    #menu ul li { display: inline; }
        
    #menu ul li a {
    font-family: arial;
    font-size: 12px;
    padding: 2px 10px;
    display: inline-block;   
    background-color: rgb(7, 58, 121);;
    color: white;
    text-decoration: none;
    border-bottom:3px solid rgb(7, 58, 121);
    transition: background-color 0.5s , color 0.5s , border-bottom 0.5s; 
    transition-timing-function: ease-out;
}
      #menu ul li a:hover {
    background-color: white;
    color: rgb(7, 58, 121);
    border-bottom:5px solid white;
}

h6 {   
   font-family: verdana;
    font-weight: bold;
   color: white;
   float: right;
   }

   a { color: inherit; }  
   
   /*Botoes abaixo da cabeçalho*/
   
   .container {
position: relative;
top: 20%;
left: 45%;
transform: translate(-50%, -50%);
}
.container div {
  display: inline-flex;
  width: 100px;
  height: 100px;
  background-color: rgb(7, 58, 121);
  margin: 0;
  padding: 0;
  transition: all .5s ease-in-out;
  position: relative;
  z-index: 0;
  color: white;
  text-decoration: none;
}
.container div:hover {
  background-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
  cursor: pointer;
  color: rgb(7, 58, 121);
  text-decoration: none;
}
<nav id="menu">                      
    <ul>
        <h6>RB, sair</h6>
        <li><a href="index.php">Inicio</a></li>
    </ul>
</nav>

<br><br><br><br>
<center>
<div class="container">
  <div><center>Cadastro de clientes<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspContas a <br>&nbsp&nbsp&nbsp&nbsppagar<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Contas a receber<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspAgenda<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Orçamentos e cadastros<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbspRelatorios<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
</div>
</center>
    
asked by anonymous 12.09.2018 / 16:00

1 answer

2

Remove the top , left , and transform properties of the .container class and add a margin-top to give nav spacing. Do not use <br> for this. 

/*Cabeçalho*/
#menu ul {
    padding:5px;
    margin:0px;  
    background-color: rgb(7, 58, 121);      
    list-style: none;
    width:99.85%;
    height: 50px ;
    position: relative;
}
    #menu ul li { display: inline; }
        
    #menu ul li a {
    font-family: arial;
    font-size: 12px;
    padding: 2px 10px;
    display: inline-block;   
    background-color: rgb(7, 58, 121);;
    color: white;
    text-decoration: none;
    border-bottom:3px solid rgb(7, 58, 121);
    transition: background-color 0.5s , color 0.5s , border-bottom 0.5s; 
    transition-timing-function: ease-out;
}
      #menu ul li a:hover {
    background-color: white;
    color: rgb(7, 58, 121);
    border-bottom:5px solid white;
}

h6 {   
   font-family: verdana;
    font-weight: bold;
   color: white;
   float: right;
   }

   a { color: inherit; }  
   
   /*Botoes abaixo da cabeçalho*/
   
   .container {
position: relative;
margin-top: 20px;
/* top: 20%;
left: 45%;
transform: translate(-50%, -50%); */
}
.container div {
  display: inline-flex;
  width: 100px;
  height: 100px;
  background-color: rgb(7, 58, 121);
  margin: 0;
  padding: 0;
  transition: all .5s ease-in-out;
  position: relative;
  z-index: 0;
  color: white;
  text-decoration: none;
}
.container div:hover {
  background-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
  cursor: pointer;
  color: rgb(7, 58, 121);
  text-decoration: none;
}
<nav id="menu">                      
    <ul>
        <h6>RB, sair</h6>
        <li><a href="index.php">Inicio</a></li>
    </ul>
</nav>

<center>
<div class="container">
  <div><center>Cadastro de clientes<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspContas a <br>&nbsp&nbsp&nbsp&nbsppagar<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Contas a receber<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspAgenda<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
  <div><center>Orçamentos e cadastros<br></center></div>
  <div><center>&nbsp&nbsp&nbsp&nbsp&nbspRelatorios<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp</center></div>
</div>
</center>
  

Use properties like text-align: center to center the texts,   do not use <center> . I also did not see utility in these various &nbsp .

    
12.09.2018 / 16:18
Configure modal with bootstrap Priority thread execution android