I've created a simple navigation that triggers an animation and opens a drop-down menu when you click on a plus sign.
However, I am struggling to position the element using CSS despite trying various combinations. Can anyone identify what I might be doing incorrectly?
Here is the CSS code:
body {
background-image: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
}
html,body {
height: 100%;
}
.aspectwrapper {
display: inline-block;
/* adjust to fit */
width: 100%;
/* set desired width */
position: relative;
/* allows .content to use position: absolute */
}
.aspectwrapper::after {
padding-top: 56.25%;
/* percentage of parent block's _width_ */
display: block;
content: '';
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* aligned with parent's edges */
outline: thin dashed green;
/* visual aid for box outline */
}
#links {
position: relative;
left: 300px;
}
The 'links' div contains the entire navigation section. It seems like I should focus on positioning this div correctly.
Here is the HTML code:
<div class="aspectwrapper">
<div class="content">
<div class="links">
<ul>
<li><a href="#design"><img height="20" src="1.png"></a></li>
<li><a href="#object"><img height="20" src="2.png"></a></li>
<li><a href="#architecture"><img height="20" src="3.png"></a></li>
<li><a href="#contact"><img height="20" src="4.png"></a></li>
<li><a href="#shop"><img height="20" src="5.png"></a></li>
</ul>
</div>
</div>
</div>
Any assistance would be greatly appreciated.