Right Header Bar should not overlap Footer

Support
#1

How to do this like you here

Every time when create this for testing, the right bar is overlapping the footer

Nomaly an Image, but getting: “Sorry, new users can only put one image in a post.” (This is shit!)
See second Post here.

How to do it?
Thanks

#2

#3

Hi There,

By default, the header bar overlaps the footer bars.

To make the footer full width, please add this custom CSS under Theme Options > CSS:

footer.x-colophon {
    width: calc(100% + 240px) !important;
}

The 240px should be the width of right header bar.

Hope it helps :slight_smile:

#4

Code seems good, thanks.

Before / After: https://imgur.com/a/N1hgK1z

But what is with the right bar created in header. Its still overlapping the footer. Want to stop it at the yellow line.

#5

Hi There,

Please update the previous code to this:

footer.x-colophon {
    width: calc(100% + 240px) !important;
    z-index: 999999 !important;
}

If it still doesn’t help, please provide us with your website URL so we can take a closer look.

Thank you.

#6

Don’t know how to reply private here :frowning: (Because site is not online, just testing around for a new design of existing Project.)
Only see this option for existing posts.

Anyway your last Post helped. Then I saw, that the right 240px is not the same background as the left part of the footer.
I changed it to this and it seems good now.

footer.x-colophon {
width: calc(100% + 240px) !important;
z-index: 999999 !important;
background-color: hsl(0, 0%, 100%) !important; }

Thank you Thai!

#7

Glad I was able to help :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.