When the window is minimized, all elements remain intact except for the navigation.
https://i.sstatic.net/xewNu.jpg
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;
}