Full width header and footer in boxed width setting

[Wocan]

Hi Guys
I’m trying to have a full-width header and footer (100%) filling the whole window of the browser which will overlap the boxed width setting of the page in dante.

Essentially I’m looking to have the footer background colour run to the edge of the browser window but keep the existing width of the elements inside the footer (rather than stretch them out).

I found this answer on another support topic but the code doesn’t seem to work as they are for other theme.

#footer > .container {
width: 100%;}

Any help whatsoever is greatily appreciated.

Cheers
-B

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.header-wrap .container {
  width: 100%;
}
#footer > .container {
  width: 100%;
}

– Kyle

[Wocan]

…sorry no joy with the above code…
-B

[Rui Guerreiro – SUPPORT]

Hi,

Due to the page container structure that is only possible if the footer is fixed.
If you want to give it a try use the custom css below.

div#footer-wrap {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
}

-Rui

[Wocan]

Hi Rui,

It works but the footer is behind the page… how do i bring it to the front?

i would like to do the same for the header:

Thanks in advance
Cheers
-B

[Rui Guerreiro – SUPPORT]

Hi,

It’s in the front to me. Can you provide a screenshot of what are you seeing?

-Rui

[Wocan]

Ja,

…here you go.

-B

[Wocan]

..can you please be king enough to go to http://ecofield.ch/home/ or and scroll to the bottom of the page.

…. the screenshot don’t show up well.

Thanks
-B

[Wocan]

..the main problem is all the Text Blocks and text fields are in front of the footer.
Thx
-B

[Rui Guerreiro – SUPPORT]

Hi,

It seems you already removed those changes. can you confirm?

-Rui

[Wocan]

No,
its still the same
The page is still in front of the footer
_B_

[Rui Guerreiro – SUPPORT]

When I checked in the morning the site wasn’t like it is now.

You also added widgets to the footer since the footer is fixed it creates that effect, when I provided you that css you only had the footer bar.

You can try to erase the previous css I provided and try this one

#copyright.copyright-divider {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 999999999999999999;
}

-Rui

[Wocan]

Hi Rui,

‘GREAT’
Thanks for the css, I made a few adjustments and got it to work.
Can you let me know how I can achieve the same in the Header?

Thanks

_B_

[Rui Guerreiro – SUPPORT]

Great.

Try the code below

.header-wrap {
position: fixed!important;
top: 0px;
z-index: 9999999!important;
left: 0px;
right: 0px;
}

-Rui

[Wocan]

Cheers Rue.

-B