I'm currently working on my portfolio and encountering some issues with the placement of my logo and navigation menu.
Here is the design I am aiming for: https://i.sstatic.net/ZPGw1.jpg
My goal is to have it displayed in that manner across 3 different breakpoints, but at the moment, the navigation bar overlaps with the logo instead of positioning itself below as intended. I had it functioning correctly before, but now I'm unsure about what caused it to go wrong. Any suggestions or advice would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
</script>
<link href="css/lightbox.css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="">NAME</a></h1>
</div>
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="article column1">
<a href="new.mp4" rel="shadowbox;height=338;width=600" title="LOGO ANIMATION"> <img class="hoverme" src="images/animation1.jpg"></a>
</div>
<div class="article column2">
<a href="images/northforest.jpg" data-lightbox="image-1" data-title="Logo Design"> <img class="hoverme" src="images/nfsmall.jpg"></a>
</div>
<div class="article column3">
<a href="images/flyer.jpg" data-lightbox="image-1" data-title="Flyer"> <img class="hoverme" src="images/flyersmall.jpg"></a>
</div>
<div class="article column4">
<a href="images/menu.jpg" data-lightbox="image-1" data-title="Flyer"> <img class="hoverme" src="images/menusmall.jpg"></a>
</div>
<div class="article column5">
<a href="images/article.jpg" data-lightbox="image-1" data-title="Article"> <img class="hoverme" src="images/articlesmall.jpg"></a>
</div>
<div class="article column6">
<a href="ahlogo.mp4" rel="shadowbox;height=338;width=600" title="LOGO ANIMATION"> <img class="hoverme" src="images/animation2.jpg"></a>
</div>
</div>
<div id="footer">
</div>
</div>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "resize"
});
</script>
</body>
</html>
CSS:
@font-face {
font-family: 'bikoblack';
src: url('fonts/biko_black.otf');
}
@font-face {
font-family: 'bikoregular';
src: url('fonts/biko_regular.otf');
}
.hoverme {
border: 3px solid #d0d0d0;
}
.hoverme:hover {
opacity: .5;
-webkit-transition: all .9s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
a:link {
color: #0f4c96;
}
a:visited {
color: #0f4c96;
}
a:hover {
color: #b2b1b1;
}
a:active {
color: #0f4c96;
}
* {
text-align: center;
}
body {
margin: 0;
font-size: 100%;
background-color: white;
}
#wrapper {
max-width:90%;
margin:0 auto;
}
img {width: 100%; height: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3.5em;
line-height: 85%;
color: #0f4c96;
float: left;
}
#header {
position:relative;
overflow:hidden;
}
#nav {
position:absolute;
bottom:1.25em;
right:1em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #0f4c96;
padding-left: 2em;
}
.column1, .column2, .column3, .column4, .column5, .column6 {
width: 32.66%;
height: 15em;
float: left;
margin: 1% 1% .01% 0%;
}
.column3, .column6 {
margin-right: 0%;}
}
@media (max-width:767px) {
h1 {
float: none;
width:100%;
text-align:center;
}
#nav {
position:static;
width:100%;margin:0 auto;
top: 5em;
}
li {
width:100px;
padding: 0 1em;
}
}
@media (max-width:480px){
li {
display:block;
text-align:center;
width:auto;
}
}
a {text-decoration: none; }