//You must have some basic knowledge about JQuery :P
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#header-top {
float: left;
width: 100%;
padding-top: 5px;
}
#header-top-inner {
display: inline-block;
width:200px;
}
#logo-image, #logo-image img {
float: left;
width: 800px;
}
#logo-content {
float: left;
}
</style>
</head>
<body>
<div id="header-top">
<div id="header-top-inner">
<div id="logo-image">
<a href="#"><img src="logo.png"/></a> // I suggest you to take wide image here
</div>
<div id="logo-content">
<h1>Text here, Text here, Text here</h1>
<h2>Text here</h2>
</div>
</div>
</div>
<script type="text/javascript">
updateLayout();
$(window).on('resize', updateLayout);
function updateLayout() {
//Hide header image on smaller screens
if ($(window).width() <= $('#logo-image').width()) {
document.getElementById('logo-image').style.display = 'none';
} else {
document.getElementById('logo-image').style.display = 'block';
}
}
</script>
</body>
</html>
Output :)
Screen 1 :)
Screen 2 :)
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#header-top {
float: left;
width: 100%;
padding-top: 5px;
}
#header-top-inner {
display: inline-block;
width:200px;
}
#logo-image, #logo-image img {
float: left;
width: 800px;
}
#logo-content {
float: left;
}
</style>
</head>
<body>
<div id="header-top">
<div id="header-top-inner">
<div id="logo-image">
<a href="#"><img src="logo.png"/></a> // I suggest you to take wide image here
</div>
<div id="logo-content">
<h1>Text here, Text here, Text here</h1>
<h2>Text here</h2>
</div>
</div>
</div>
<script type="text/javascript">
updateLayout();
$(window).on('resize', updateLayout);
function updateLayout() {
//Hide header image on smaller screens
if ($(window).width() <= $('#logo-image').width()) {
document.getElementById('logo-image').style.display = 'none';
} else {
document.getElementById('logo-image').style.display = 'block';
}
}
</script>
</body>
</html>
Output :)
Screen 1 :)
Screen 2 :)
No comments:
Post a Comment