These are variations on headers for Joomlashine templates. The header section of these templates is under developed so you need to do workarounds to get a standard header section you can control.
Notes
When using logo position
- use <div style="clear: both"></div> to seperate the menu and logo position if the are on the same line. using css causes the mobile menu to go funny.
- you can also use the logo in the template as this will show in the 404 pages etc.. whilst not being shown in the logo position
- you need to remove the pull-left from the logo position in index.php - dealt with below
Joomlashine Prerequisite Fix
All of these headers will require the following fix when using a joomlshine template and they should be put in the 'Top' position.
This allows you to use the whole header area as one module position and unless mentioned you do not use the Joomlashine logo position.
When you use the header there is usually a float applied to the 'Top' position and the following code (pick 1) will fix that
Inline CSS
You need to put this version of the code in your module code. You might also need to remove the float from jsn-headerright by adding the element declaration to the code below.
<style type="text/css">
/* Allow Position Top to act as a normal div */
#jsn-pos-top div.jsn-modulecontainer {
float: none;
/* margin: 0 0 0 20px; - adds a margin below this and the menu - set to 0 if no margin required */
}
</style>
Template CSS
This code can be added into your custom.css template file. I have not tested this but it should work. You might also need to remove the float from jsn-headerright by adding the element declaration to the code below.
/* Allow Position Top to act as a normal div */
#jsn-pos-top div.jsn-modulecontainer {
float: none !important;
}
Remove class="pull-right" or class="pull-left"
I have been removing the following code by editing the template.php and removing the class declarations from the following code. Editing the template.php should be a last resort but it is effective.
<div id="jsn-pos-top" class="pull-right;"> and if required <div id="jsn-headerright" class="pull-right">
Header 1 - Pool Table Style
This is a simple header with the logo on the left and the phone number on the right that will flow under the logo when the screen gets too small.
HTML
<div style="margin: 10px;"><img style="float: left;" src="/images/kb/2016/719/demo-logo-450px.png" alt="" /></div> <div style="float: right; text-align: center; margin: 10px;"> <span style="font-size: 18pt; color: #ffffff;">Call for a free quote today</span><br /> <span style="font-size: 18pt; color: #ffffff;"><strong><a href="tel:07747 123456">07747 123456</a></strong></span> </div>
Header 2 - Danson Style
Logo on the left, large phone number on the right and then when the window is made smaller (goes mobile) the phone number is made smaller and goes underneath the logo.
CSS
/* Header Blurb CSS to allow for large phone number and logo to be responsive */
@media screen and (max-width: 899px) {
.header-large-phone-number {display: none;}
}
@media screen and (min-width: 900px) {
.header-small-phone-number {display: none;}
.header-large-phone-number {
width: 500px;
height: 100px;
line-height: 100px;
margin-left: 100px;
}
.header-large-phone-number span strong{
vertical-align: middle;
font-size: 32pt;
}
}
HTML
<div id="header-logo" style="float: left; margin: 5px;"> <div><span style="font-size: 36pt; color: #162156;"><strong>My Demo Company</strong></span></div> <div style="width: 100%; background-color: #162156;"><span style="font-size: 14pt; color: #ffffff; padding: 5px;"><strong> IT Consultants Ltd.</strong></span></div> <div class="header-small-phone-number" style="text-align: center;"><span style="font-size: 14pt; color: #162156;"><strong>Tel: 07747 123456</strong></span></div> </div> <div style="float: left;"> <div class="header-large-phone-number"><span style="color: #162156;"><strong>Tel: 07747 123456</strong></span></div> </div>
Header 3 - Barnett Style
This header is comprised of both a desktop and mobile version. The cross over width is 1151px/1152px. The logo is centered with association logos either side which are moved to below the logo when in the mobile view.
CSS
/* Header Control */
@media only screen and (min-width: 1152px) {
.header-display-mobile {
display: none;
}
}
@media only screen and (max-width: 1151px) {
.header-display-desktop{
display: none;
}
}
HTML
<!-- Desktop Version --> <div class="header-display-desktop"> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px; float: left;" /></a> <div style="width: 60%; text-align: center; display: inline-block;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" style="margin: 10px;" /></div> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px; float: right;" /></a> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px; float: right;" /></a> </div> <!-- Mobile and Tablet Version --> <div class="header-display-mobile"> <div style="text-align: center;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" /></div> <div style="text-align: center;"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px;" /> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px;" /></a> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px;" /></a> </div> </div>
Header 4 - IVR Style
This header is very simple and comes in 2 formats, with and without Tap To Call. It has a desktop version which when gets to squashed changes into a single column at 640px. A very elegant header and can be used for many things.
This works better when in the header because it is sized for that but you can definately see how it works.dddddd
With Tap To Call
CSS
/** Standard Logo Header Block **/
/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
margin-top: 10px;
margin-bottom: 0;
}
/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
#lancastrian-header-left{
float: none !important;
text-align: center;
}
#lancastrian-header-right{
float: none !important;
text-align: center;
}
}
/* Tap To Call */
@media only screen and (max-width: 959px) {
.tap-to-call-desktop {
display: none;
}
}
@media only screen and (min-width: 960px) {
.tap-to-call-cellphone {
display: none;
}
}
HTML
<div id="lancastrian-header-left" style="float: left; margin: 10px;">
<img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>
<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
<span style="font-size: 18pt;">Call for a free quote today</span><br />
<div class="tap-to-call-cellphone">
<div style="text-align: center;"><a href="tel:01234 567890">
<img src="/images/modules/tap-to-call/tap-to-call.png" alt="Call us" /></a>
</div>
</div>
<span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
<a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>
Without Tap To Call
CSS
/** Standard Logo Header Block **/
/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
margin-top: 10px;
margin-bottom: 0;
}
/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
#lancastrian-header-left{
float: none !important;
text-align: center;
}
#lancastrian-header-right{
float: none !important;
text-align: center;
}
}
HTML
<div id="lancastrian-header-left" style="float: left; margin: 10px;">
<img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>
<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
<span style="font-size: 18pt;">Call for a free quote today</span><br />
<span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
<a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>