Creating a Responsive Template Header
Monday, April 2, 2018
How to create responsive headers in blogger default template, in the previous post BlogSeo has explained how to create default blog template responsiveness, but after BlogSeo replace the header with an image, the image widened to the left. This is a mistake that should be fixed so that the header becomes responsive.
How to Make Responsive Header Image
To create a responsive header, here BlogSeo will explain the tutorial in detail so you can easily understand it.
To create a responsive header here we will use two headers ie left and right header.
The following Steps Create Responsive Headers
First. Use CSS below and place it above </ b: skin>
.header-wrapper{max-width: 900px;color: #333;min-height:80px;overflow: hidden;position: relative;z-index: 999;margin: 0 auto;width: 100%;}
#header{max-width:350px;float:left;width:auto;overflow:hidden;z-index:999;min-width:300px;margin:0;padding:0}
#header-inner{margin:10px 0;padding-left:8px}
#header h1,#header p {text-transform: uppercase;margin-top:0;
font:35px Impact,Oswald,Arial;line-height:15px;color:#333;margin-bottom:10px}
#header h1.title a:hover{color:#48b;text-decoration:none}
#header .description{color:#333;font:13px Poppins,Arial;margin:15px 0 0;text-transform:none}
#header img{border:0 none;background:none;width:70%;height:auto;margin:0 auto;float: left;}
#header2{float:right;max-width:500px;margin:5px 0}
.header2 .widget{margin:0 auto;padding:5px 0}
@media screen and (max-width: 960px) {
#header{float:none;max-width:none;text-align:center;margin-top:10px}
#header-inner{margin-bottom:0}
#header h1,#header p{margin-right:0}
#header .description{margin:0}
}
@media screen and (max-width: 910px) {
#header{float:none;max-width:none;text-align:center;margin-top:10px}
#header-inner{margin-bottom:0}
#header h1,#header p{margin-right:0}
#header .description{margin:0}
#header2,#header2 img{text-align:center;width:100%}
}
@media screen and (max-width: 768px) {
.header-wrapper{margin-right:0;min-height:0;width:100%}
#header{text-align:center;width:100%;max-width:none}
#header-inner{margin:10px 0}
}
@media screen and (max-width: 480px) {
#header img{max-width:100%;float:none;}
}
@media screen and (max-width: 240px) {
.header-wrapper{margin-right:0;min-height:0;width:100%}
#header{text-align:center;width:100%;max-width:none}
#header-inner{margin:10px 0}
#header img{border:0 none;background:none;width:auto;height:auto;margin:0 auto}
}
body#layout .header-wrapper{width:950px}
body#layout #header{float:left;width:30%;margin-top:35px;}
body#layout #header2{float:right;width:60%;margin-top:40px}
Second. Find the code<header>CodePlaceHere</header> replace all the code in the code and replace it with the code below:
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Techno_Update (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEo2sN4Nv5Uhnl7y-rDZ1WjeSPhLO0SmLl0eivNwpzlH-LbeMxTCrhs47bF364c6p2G8Q8LBypTi955lMzE3feAlX77ANz38kTFlqwZZ9EIbxWZsqcmfnEJnJc078SsqMi2q5N-Wm9Bzt2/s1600/cooltext277782382116515.png</b:widget-setting>
<b:widget-setting name='displayHeight'>60</b:widget-setting>
<b:widget-setting name='sectionWidth'>268</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>291</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url("" + data:sourceUrl + ""); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='header2' id='header2' preferred='yes'/>
</header>
</div>
</div>
</div>
By using the above steps then the blog header image will become responsive.
Do not miss the latest update from BlogSeo follow us by email in the column below.