When the window is minimized, all elements remain intact except for the navigation.
The image below shows the layout when the window is maximized, while the image above depicts the layout when the window is minimized.
HTML:
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<nav>
<div class="navigation">
<a href="home.html">
<div class="box" style="background: rgba(0, 0, 0, 0.4)">
<img src="images/home.png">
<div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div>
</div>
</a>
<div class="box">
<img src="images/aboutus.png">
<div class="name">ABOUT US</div>
</div>
<div class="box">
<img src="images/groupcompanies.png">
<div class="name">GROUP OF COMPANIES</div>
</div>
<div class="box">
<img src="images/career.png">
<div class="name">CAREER</div>
</div>
<div class="box">
<img src="images/contactus.png">
<div class="name">CONTACT US</div>
</div>
</div>
</nav>
</div>
</header>
CSS:
body {
background-image:url(images/pattern.png);
min-width: 775px;
overflow:auto;
}
@font-face {
font-family:"myfont";
src:url(font/PTN57F.woff);
}
.header {
max-width:1200px;
min-width:200px;
height:170px;
margin:0 auto;
margin-top:10px;
background-color:rgba(0, 0, 0, 0.5);
border-radius:3px;
}
.logo {
width:230px;
}
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
float:left;
}
.navigation {
width:800px;
height:100px;
margin-left:256px;
float:none;
}
.box {
height:100px;
width:150px;
margin-right:5px;
float:left;
background: rgba(0, 0, 0, 0.2);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
border-radius:2px;
margin-top:31px;
}
.box:hover {
background: rgba(0, 0, 0, 0.4);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
}
.name {
height:23px;
width:auto;
text-align:center;
font-family:myfont;
font-size:14px;
color:#FFF;
text-decoration:none;
}
.box img {
float:none;
margin-left:38px;
margin-top:3px;
}