CODEWITHSUNDEEP
css
Parlanchina
Parlanchina

Reputation: 157

Header issue on mobile

The site is http://www.oahu-hawaii-luau.com/ My header doen't come on small mobile screens but I can see it when I make my desktop window smaller. So it seems the issue is only with Mobile and Safari. The issue appears on screens smaller than 984px.

My logo header code is:

.logo-logobg {
    position: absolute;
    min-width: 300px;
    min-height: 1260px;
    width: 100%;
    z-index: 1000;
    background: url(images/logo-logobg.png) left top no-repeat;
}

I narrowed down the problem to the mobile navigation. The error is in this code but still cant figure out what exactly:

.nav-mobile {
    display:block;

}
.nav {
    width:100%;
    padding:0px 0 0 0;
    position:absolute;
    z-index:999999;
    top:53px;

}
.nav-list {
    display:none;
}
.nav-item {
    width:100%;
    float:none;
    background-image:none;
    padding-bottom:0px;
}
.nav-item:hover {
    background-image:none;
    padding-bottom:0px;
}
.nav-item > a {
display:block;
color:#ffffff;
padding:8px 16px;
text-decoration:none;
font-size:14px;
border-bottom:1px solid #276815;
margin:0px;


height:auto;
line-height:normal;

border-radius:0px;
}

Upvotes: 2

Views: 52

Answers (1)

Rick Sibley
Rick Sibley

Reputation: 625

put this in your head: <meta name="viewport" content="width=device-width">

Upvotes: 1

Related Questions