Reputation: 279
I have created demo of my problem so far.
The issue I am having is I require the menu image to sit on top of the div and push the whole 'imgDiv' down as if it was hiding behind it. Now I can achieve something close but placing the 'menumobile. directly underneath the 'imgDiv' but it pushes the content down but also causes a problem with it's position.
so my goal is for the image to be sat floating at the centre of the top on top of the 'imgDiv' and when clicked it reveals the menu and pushes down the whole of the 'imgDiv' and not just the content but I am struggling to make it work.
<center><div id="menumobile">
<div id="nav-mobile">
<a href="#"><img src="img/menu.png" alt="Menu" class="menuimage"/></a>
<ul>
<li><a href="#imgDiv2">Item1</a></li>
<li><a href="#imgDiv3">Item2</a></li>
<li><a href="#imgDiv4">Item3</a></li>
<li><a href="#packages">Item4</a></li>
<li><a href="#imgDiv5">Item5</a></li>
</ul>
<br /><br />
</div>
</div>
</center>
<div id='imgDiv'>
<div>
<div class="containeralt">
<h1>Header</h1>
<br />
<a href="#imgDiv2"><span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"></span></a>
</div>
</div>
</div>
Please ignore center tags I am just using them for the purpose of the demo.
$(document).ready(function() {
$('#nav-mobile ul').hide();
$('#nav-mobile a').click(function(e) {
$('#nav-mobile ul').slideToggle(200);
});
});
#imgDiv {
position:relative;
height:75%;
width:100%;
background-image:url(http://walljpg.com/wp-content/uploads/2014/04/blurry-backgroundgriscomkz-dpilzwd3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #666666;
display:table;
text-align: center;
background-attachment:fixed;
position:relative;
margin-top: -20px;
}
#imgDiv > div:first-child {
display:table-cell;
vertical-align:middle;
width:100%;
}
#nav-mobile > a {display:inline-block;}
#menumobile{
background-color: transparent;
text-align:center;
margin-top: 40px;
margin-bottom:40px;
z-index: 999999;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
position: relative;
background: none;
}
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
}
#nav-mobile ul li {
width: 100%;
display: block;
padding: 20px 0 20px 0;
margin: 0;
}
#nav-mobile ul a{
color: #000;
text-decoration:none;
font-size: 16px;
}
#nav-mobile ul a:hover {
background: none;
color: #FFF;
}
#nav-mobile ul li:hover {
}
.menuimage{width: 30px; height: 30px;}
Upvotes: 0
Views: 146
Reputation: 184
Try adding these properties to your ul tag : position and z-index as shown below.
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
padding: 20px 0 60px 0;
position:absolute;
z-index:999;
}
Let me know if this is the behaviour you expect. Hope it helps!
Upvotes: 1