I encountered an unusual issue on my webpage.
Everything was going smoothly with my navigation bar, even for mobile phones. However, as soon as I added a photo below the navigation bar, it disappeared...
I'd like to keep the navigation bar visible, but every attempt at fixing it seems to make it disappear altogether.
The picture needs to remain relative in order to maintain its correct display when resizing for mobile devices.
Does anyone have a solution to bring back the missing navigation bar?
Image CSS
.header{
max-width: 100%;
margin-left: 0;
margin-top: 0;
position: relative;
letter-spacing: 4px;
margin-top: 70px;
box-sizing: inherit;
}
.header-image{
max-width: 100%;
height: auto;
border-style: none;
background-size: cover;
background-position: center center;
display: block;
position: relative;
box-sizing: inherit;
}
.header-image-text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: inherit;
display: block;
text-align: center!important;
margin-top: 16px!important;
}
.header-image-text h1{
color: white;
font-size: 38px!important;
margin: 10% 0;
}
.header-image-text h1 .border{
padding: 8px 16px!important;
background-color: black;
opacity: 0.75;
}
Navigation Bar CSS
.container{
margin: 0 auto;
width: 100%;
position: fixed;
}
.nav{
border-bottom: 1px solid #EAEAE8;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
}
.menu{
margin: 0 30px 0 0;
}
.menu a{
clear: right;
text-decoration: none;
color: #000;
margin: 0 10px;
line-height: 70px;
padding: 20px;
border-radius: 40px;
}
.menu a:hover{
background-color: #03999e3b;
}
label{
margin: 0 40px 0 0;
float: right;
margin: 0 10px;
line-height: 70px;
font-size: 26px;
display: none;
width: 26px;
float: right;
}
#toggle{
display: none;
}
@media only screen and (max-width: 700px){
label{
display: block;
cursor: pointer;
position: fixed;
}
.menu{
text-align: center;
width: 100%;
display: none;
}
.menu a{
display: block;
border-bottom: 1px solid #03989E;
margin: 0;
}
#toggle:checked + .menu {
display: block;
position: fixed;
}
}
.active{
background-image: linear-gradient(315deg, #ffffff 0%, #03989E 74%);
}