Customised Full Width Header |
|
Jonathan
|
Hi Everyone
I'm trying to customise a full width header (outside the sheet) to take a Responsive Unite Revolution Slider.
I've got it working in Desktop mode, but when you reduce the screen down to phone size only the first image in the rotator comes up, then the area goes blank. So I figure it must be something to do with the 'header' responsive code?
Just as a check, I also installed the same slider in 'position 15' (within the sheet) and that works fine in Desktop and Responsive mode.
Here's the link: http://www.fdctest2.co.uk/westerhillhomestest/
I've tried lots of code changes of the 'responsive header' code, without any luck. though I'm not sure if I should be changing the 'responsive' code in the 'template.css' file or in the 'template.responsive.css file?
I'm using Artisteer 4.3
Here's the current code for the 'header' from the template.css file:
.art-header
{
margin: 0 auto;
background-repeat: no-repeat;
height: auto;
position: relative;
background-image: none!important;
background-position: center top;
}
.custom-responsive .art-header
{
background-image: none!important;
background-position: center top;
}
.default-responsive .art-header, .default-responsive #art-header-bg
{
background-image: none!important;;
background-position: center center;
background-size: cover;
}
.art-header-inner
{
position: relative;
min-width: 100px;
max-width: 2000px;
width: 100%;
z-index: auto !important;
margin: 0 auto;
}
.art-header>div.art-nostyle, .art-header>div.art-block, .art-header>div.art-post
{
position: absolute;
z-index: 101;
}
|
| |
Jonathan
|
I've fixed the problem.
In the 'Responsive CSS' file I just had to comment out 1 line, shown below, or you could just delete the line of code: 'position: relative;'
.default-responsive .art-header * {
/*position: relative;*/
text-align: center;
transform: none !important;
}
Hours and hours of work - hope this helps someone save some time.
P.S. If you're adding a 'full width header' and you want to break free of Artisteer's constraint to fix the height, you can just replace Artisteer's code in the 'Template.css' with this:
.art-header
{
margin: 0 auto;
background-repeat: no-repeat;
height: auto;
position: relative;
background-image: none!important;
background-position: center top;
}
And you may need this:
.art-header-inner
{
position: relative;
min-width: 100px;
max-width: 2000px;
width: 100%;
z-index: auto !important;
margin: 0 auto;
}
|
| |
|
|