Problems with responsive in iPhone

Question

I'm trying to make my own website but I'm having a LOT of glitches with responsive on iphone

Look these screens:

I have and intro of my web and a menu

This works perfectly in all Windows browsers and also in Android. Which does not happen on Safari or all browsers from iphone:

The text does not appear, and the menu does not even open completely

my css:

//Navbar:

.at-front-no-feature.menu-default .navbar{
        position: fixed;
    }
    .menu-default .navbar{
        position: static;
        z-index: 9;
        left: 0;
        right: 0;
    }

CSS when i click on button:

.menu-default #navbar .navbar-collapse {
    height: auto;
    min-height: 100%;
    position: fixed;
    max-height: 70vh;
    right: 0;
    left: 0;
    z-index: 999;
}

CSS Of links:

    float: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}

CSS of my text center (Hi my name is peter)

.home-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.home-content h1{
    display:block;
    width:100%;
    color: #202020;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
}

.home-content a{
    width:200px;
    height: 50px;
    border:1px solid black;
    background:#666!important;
    margin-left:40px;
    line-height:50px;
    text-decoration:none!important;
    color:#f2f2f2!important;
    border-radius:10px;
    transform:300ms all;
}

How can i fix this? I have tried with display: inline-block; and vertical-align:middle; and it does show me the text on iphone but it won't let me resize the buttons ... or apply width or height.

Edit: I have been doing tests and it seems that the image dulls the menu and therefore is not visible. Despite using fixed or absolute position it is not seen. As much as I use the z-index it doesn't work ... How can I fix it?

Answer 1

See this:

$(document).ready(function () {
        $('.menu-btn').click(function(event) {
            $('.navbar-demo').toggleClass('open-nav');
        });
    });

body {
        margin: 0;
        font-family: Roboto;
    }

    .hero-image .about-me {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        right: 0;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 99;
    }

    .hero-image .about-me label {
        font-size: 26px;
        color: #fff;
        display: block;
    }
    .hero-image:after {
        background-color: black;
        content: '';
         position: absolute; 
        width: 100%;
        left: 0;
        right: 0;
        height: 100%;
        opacity: 0.3;
    }

    .hero-image {
        background-size: cover;
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: lightgray;
        background-image: url('https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
        display: table;
          background-position: center;
    }


    .hero-image .about-me a {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        padding: 10px 20px;
        border: 1px solid white;
        margin: 20px;
    }


    .navbar-demo {
        display: table;
        width: 100%;
        position: fixed;
        z-index: 99;
    }

    .navbar-demo .nav-bar ul li {
        display: block;
    }

    .navbar-demo .nav-bar ul {
        padding: 0;
        display: table;
        text-align: center;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .navbar-demo .nav-bar ul li a {
        font-size: 18px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #000;
        padding: 18px;
        text-transform: uppercase;
    }

    .nav-bar {
        text-align: center;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items: center;
        position: relative;
    }
    .navbar-demo button.menu-btn {
        display:none;
    }







@media only screen and (max-width: 767px){
   .navbar-demo  button.menu-btn {
        position: absolute;
        top: 0;
        right: 0;
        background-color: unset;
        border: 0;
        font-size: 26px;
        display:block;
        padding: 23px;
        color: #fff;
        outline: none;
    } 
    .navbar-demo{
        height:100%;
        z-index: 999;
    }
    .navbar-demo .nav-bar {
        left: -950px;
        background-color: #000000d9;
        transition: 1s;
        height: 100%;
    }

    .navbar-demo.open-nav  .nav-bar{
        left: 0;
        width: 100%;
        transition: left 0.5s;
        height: 100%;
    }

    .navbar-demo .nav-bar ul li a {
         display: block;
         color: #fff;
    }
    .navbar-demo.open-nav button.menu-btn i:before {
        content: '\f00d ';
    }
}

<!-- Meta View Port -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  


<header id="header" class="navbar-demo">
    <div class="nav-bar">
        <ul>
            <li>
                <a href="#">Lorem ipsum</a>
                <a href="#">Lorem ipsum</a>
                <a href="#">Lorem ipsum</a>
                <a href="#">Lorem ipsum</a>
            </li>
        </ul>
        
    </div>
    <button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header> 

<div class="hero-image">
    <div class="about-me">
        <div class="row">
            <label>Hi My Name is John Doe</label>
            <a href="#">Lorem ipsum</a>
            <a href="#">Lorem ipsum</a>
        </div>
    </div>
</div>