Menu does not appear in mobile version

Question

Good morning everyone, to finalizing a page that has an external menu, requested in PHP with require, I have also tried include, but still continues with the same problem, as images below the menu only appears in the desktop version, in Chrome mobile version does not appear, Does anyone have any idea what it might be?

As I said above, it is a normal PHP page, both the print page, and the menu.php, and none of the pages that is required the menu, in the mobile version does not appear;

Code

<?php
require 'head.php';
require 'conn/conexao.php';

date_default_timezone_set('America/Sao_Paulo');

?>
<style type="text/css">
#kit{
    position:absolute;
    width:80%;
    height:auto;
    top:50%;
    left:50%;
    margin-left:-40%;
    margin-top:-250px;
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2), 0 8px 22px 0 rgba(0, 0, 0, 0.19);
}
#escrita{
    font-family:Verdana, Geneva, sans-serif;
    font-size:30px;
    color:#333;
}
a{
    text-decoration:none;
}
a:link {
   text-decoration:none;
}
a:visited { 
    text-decoration:none;
    color:#000;
 } 
a:hover{
    text-decoration:none;
}
table.tabela{
    text-align:center;
    border-collapse:collapse;
    width:70%;
    margin-bottom:2%;
    margin-top:2%;
}
table.tabela tr td {
    border:1px outset;
    text-align:center;
}
</style>

<div id="kit" align="center"> 


<?php 

  $hora = date('H:i');
  if($hora >= '13:30' && $hora <= '22:00' ){
      $turno = 'Turno B';
  }elseif($hora >= '22:01' && $hora <= '04:59' ){
      $turno = 'Turno C';
  }else{
      $turno = 'Turno A';
  }
   ?>

<form action="" method="post">   


<table class="tabela">


<tr>
    <td colspan="8">
        <p id="escrita">Reporte de produção por turno: 
<select name="turno" style="width:100px; height:40px; font-family:Verdana, Geneva, sans-serif; font-size:17px; color:#F00;">
          <option value="<?php echo $turno; ?>"><?php echo $turno; ?></option>
          <option value="Turno A">Turno A</option>
          <option value="Turno B">Turno B</option>
          <option value="Turno C">Turno C</option>
</select>
<input type="date" value="<?php echo date('Y-m-d', strtotime('-1 day')); ?>" name="data_reporte" style="width:130px; height:35px;" />
</p>
    </td>
</tr>


<tr>
    <td>Número</td>
    <td>Máquina</td>
    <td>Grupo</td>
    <td>Agulhagem</td>
    <td>Produção</td>
    <td>Setup</td>
    <td>Pares Segunda qual.</td>
    <td>Peso Terceira qual.</td>
  </tr>


<script type="text/javascript" src="meia/js/jquery.min2.js"></script>
<script type="text/javascript" src="meia/js/jquery.wallform.js"></script>



<?php
$sql = "SELECT * FROM maquinas ORDER BY id ASC";
    $disp_sql = $mysqli->query($sql);
    while($data = $disp_sql->fetch_array())
    { 
        $num       = $data['num'];
        $maq       = $data['maq'];
        $grupo     = $data['grupo'];
        $agulha    = $data['agulha'];

?>

  <tr>
    <td><?php echo $num; ?><input type="hidden" value="<?php echo $num; ?>" name="num[]" /></td>
    <td><?php echo $maq; ?></td>
    <td><?php echo $grupo; ?></td>
    <td><?php echo $agulha; ?></td>
    <td>
    <input type="number" name="producao[]" min="0" max="500" style="width:50px;" tabindex="<?php echo $num; ?>" id="<?php echo $num; ?>" onkeyup="Enter('<?php echo ($num + 1); ?>');" />
    </td>
    <td><input type="checkbox" name="setup[]" value="s" /></td>
    <td>
    <input type="number" name="segunda[]" value="0" min="0" max="5000" style="width:50px;" id="<?php echo "1-".$num; ?>" onkeyup="Enter('<?php echo ("1-".($num + 1)); ?>');" />
    </td>
    <td>
    <input type="number" name="terceira[]" value="0" min="0" max="5000" style="width:50px;" id="<?php echo "2-".$num; ?>" onkeyup="Enter('<?php echo ("2-".($num + 1)); ?>');" />
    </td>
  </tr>


<?php } ?>  

  <tr>
    <td colspan="8"><input type="submit" value="Reportar produção" style="width:150px; margin:5px;" /></td>
  </tr>
  <input type="hidden" name="teste" value="teste" />
</form>

</table>

<script type="text/javascript">

function Enter(idinput){
    if(event.keyCode == 13){
      document.getElementById(idinput).focus();
      event.preventDefault();
      return false;
    }
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

</script>
<script type="text/javascript" src="meia/js/jquery.min2.js"></script>
<script type="text/javascript" src="meia/js/jquery.wallform.js"></script>
<script>
</script>
</div>
</body>
</html>

Answer 1

Use Media Queries in your CSS, to take away the margin-top of your div, which is above the menu, in the mobile version.

@media (max-width: 575.98px) {
#kit{
    top:0%;
    margin-top: 0px !important;
 }
}