Footers that stay put

Explorer ,
Sep 04, 2012 Sep 04, 2012

Copy link to clipboard

Copied

Hello,

I'm trying to create a footer (different to the main site footer) that sits below the site. Essentially a Bar that fills the width of the window and stays at the bottom of a window.

http://127.0.0.1:33334/Preview/5FMn-UcvhCV04bLA623u-Q/index.html

As you can see I've initially achieved this by simply drawing a rectangle and ticking "footer items move up and down with the bottom page edge". However, when I preview in browser, the rectangle does not sit directly on the edge.

Is there any way of making an actual footer that stays at the bottom of a website?

Cheers

Views

32.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Sep 22, 2013 Sep 22, 2013
Please check if you have Sticky Footer enabled under1. File > Site Properties2. Page > Page Properties (for master and child pages)Cheers,Vikas

Likes

Translate

Translate
Participant ,
Sep 04, 2012 Sep 04, 2012

Copy link to clipboard

Copied

Oli, the link you've posted is invalid. It points to your own computer, not an internet address.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 05, 2012 Sep 05, 2012

Copy link to clipboard

Copied

Ahh sorry, i pasted the wrong link

This is an example of what i'm trying to achieve, just taken from a BC Template. notice the last footer containing social links ect.

http://triatleten.businesscatalyst.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 09, 2012 Sep 09, 2012

Copy link to clipboard

Copied

Sorry to be repetitive, but this is really bothering me, and can't find a solution anywhere!

I'm just looking to attach an area that fixes to the footer 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 09, 2012 Sep 09, 2012

Copy link to clipboard

Copied

Ok so I thought i found a solution with the pinning tool, which is brilliant! But this doesn't solve my problem as i previously thought. I still need my footer to remain in the footer and not above the page intself (pinning fixes above page content).

My footer needs to remain at the very bottom of the page, and when i add a bar to this area and select the footer icon it still doesn't sit at the bottom of the window see example:

http://www.triatleten.dk/muse/footer.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 09, 2012 Sep 09, 2012

Copy link to clipboard

Copied

the issue is not pinning... it is that the length of your page is shorter than the length of your browser... try adding more content or extending the length of your webpages using these sliders:

Screen Shot 2012-09-09 at 2.17.26 PM.png

then drag your "footer: down to the bottom, and drag down your footer sldier (top one) down to the top of your footer. Get rid of all pinning and make sure "footer" is checked instead

Hope this helps!

Julia

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 09, 2012 Sep 09, 2012

Copy link to clipboard

Copied

Thanks for the reply. This still doesn't work, and only works if like you suggest you extend the 'bottom of page' to more than 800 pixels in height, to accommodate most screen sizes. This compromises my design and also the "bottom of my page" does not sit on the "bottom of my browser".

Perhaps another example is necessary:

http://www.guildfare.com

As you can see, the website has minimal content yet when you stretch the browser beyond scrollable content, the "Footer" remains the same height, and fixed to the browsers edge, no matter how large (i'm currently viewing maximized on a 27" screen)

Screen shot 2012-09-10 at 00.48.08.png

Screen shot 2012-09-10 at 00.50.02.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

Julia,

I think the point here is not extending the lenght of the page to a certain point. The footer should stay at the bottom of the page (not the same as the bottom of the window) under any circumstances. If the page is too short, the footer should appear at the bottom of the window, not at an intermediate point. If the page is too long, the footer should stay at the bottom of the page and be only visible when you scroll to the bottom of the page.

Just think about the great diversity of screen resolutions you can find. I have a 24" monitor with a resolution of 1920x1200 but I can also rotate the monitor 90º so the resolution in this case will be 1200x1920!

The examples Oli has provided offer a solution for any resolution and page height. I believe Muse does not corrently implement such solution so I think this should be a must for the next release.

Also, not discussed here but useful too are the footers that stay always at the bottom of the WINDOW and stay there static even if you scroll the page. A very famous example is the facebook header (well, being a header and not a footer, this stays at the top of window)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

I would also like to find a solution to this issue. I would refer to it as a "sticky footer." Researching this finds some CSS div wrapping solutions to alter the code but there has to be a way to do this natively in the application. Please let us know if there is a way to do this directly in MUSE.

thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

Yes this is odd. Now sure why they would not have thought to add sticky footers. This would be a great feature to add!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

Are you trying to design a page like this, http://xyzabc01.businesscatalyst.com/untitled-29.html ?

If yes, you have to pin the footer to the bottom of the browser and bring it to the front by arrange options.

- Abhishek Maurya

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

Yes I know about this method but an actual sticky footer option would be more suited and have less problems. Plus my pinning seems to be all messed up! I have a logo arranged to the top but when it gets to an area where I have a box that spans width the logo goes behind it! Can' figure it out!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2012 Sep 10, 2012

Copy link to clipboard

Copied

Hi Abhishek, no we're tyring to design footers that stay at the bottom of the website, that aren't on top of content (as your example shows through pinning) and do not move when a browser is maximized to fit a large screen.

What the heck, have added some more screen shots just in case.

Screen shot 2012-09-10 at 22.07.03.png

Screen shot 2012-09-10 at 22.05.26.pngScreen shot 2012-09-10 at 22.07.43.pngScreen shot 2012-09-10 at 22.08.25.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 11, 2012 Sep 11, 2012

Copy link to clipboard

Copied

Hi Oli_wales,

These are the four situations I can think of:

1. There is very little content and you want the footer on the bottom of the browser.

- Pin it to the bottom of the browser.

2. There is a lot of content and you want the footer on the bottom of the browser irrespective of the content.

- Pin it to the bottom of the browser. While scrolling if you want the content to go behind the footer...

3. There is a lot of content and you want the footer to come after the content has been scrolled.

- Use footer.

4. There is a very little content you want the footer to appear just after the content.

- Use footer.

As Julia correctly pointed out if there is a very little content on the page and you want the footer to appear on the bottom of the browser then you will have to use pin as you won't be able to use the footer for that purpose.

As far as the width of the footer is concerned I see that there is bug when you group the footer items together so as a workaround I would suggest don't group them. You will have to individually make them footers or pin.

If you want the footer to extend to the width of the browser then align them to the browser or if you want them to extend to the width of the page then align it to the page.

As far as the content being on top or bottom is concerned use the arrange option accordingly.

I understand that you can't have just one solution for all these at this point of time, so you will have to use either/or on different pages. About the sticky footers, I would recommend that you add it to the ideas section over here, http://forums.adobe.com/community/muse/ideas

Let me know if you need more clarification.

- Abhishek Maurya

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 11, 2012 Sep 11, 2012

Copy link to clipboard

Copied

Hi Abhishek,

Thank you for all this!

I completely agree with you, this is an issue and a workaround is the only thing that can be done for now. Pinning isn't an option for this, as again it compromises the design, in fact it dominates the design (as your examples show). So for now, I will pretend that my site shall be viewed on smaller screens until a real solution is conceived by Adobe.

I shall heed your advice and add this bug (which it is) fix to the ideas board! This is standard web practice, and Muse has almost got it right with the drag to edge functionality or the "Footer" check box, which is a slight contradiction if you see my screenshot of your example Abhishek  - it doesn't look pretty does it (compared to my previous screenshot of the Guildfare website)

Many thanks

Screen shot 2012-09-11 at 22.50.31.png


Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 31, 2013 Mar 31, 2013

Copy link to clipboard

Copied

Hi!

Does anybody know already how to fix this? or why is this all about? I think I'm having the same problem... I was actually following the Katie's Cafe tutorial from the Muse tutorials, and somehow I'm getting a gap between the footer and the bottom. I checked the files of the tutorial which work fine, but I can't see where is the problem... or maybe I'm too tired or sleepy to find it?

Here is how the preview of the tutorial file looks like (and how I want it):

Captura de pantalla 2013-04-01 a la(s) 01.01.52.png

Here is how mine looks like:

Captura de pantalla 2013-04-01 a la(s) 01.02.53.png

And here what I have it in the design:

Captura de pantalla 2013-04-01 a la(s) 00.58.51.png

Any clue about this?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 22, 2013 Sep 22, 2013

Copy link to clipboard

Copied

I'm having this same problem    DESIGN SCREEN:

Design state.png

PREVEIW SCREEN:

Preview state.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 22, 2013 Sep 22, 2013

Copy link to clipboard

Copied

Please check if you have Sticky Footer enabled under

1. File > Site Properties

2. Page > Page Properties (for master and child pages)

Cheers,

Vikas

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 11, 2016 May 11, 2016

Copy link to clipboard

Copied

This fixed the issue. I was having the same as everyone else. Just uncheck sticky footer and the footer will stay put where you have it in the Master pages. Thank you so so much.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 23, 2013 Sep 23, 2013

Copy link to clipboard

Copied

The footer is correct. It appears at the bottom of the view. I think the problem here is the purple box on the left should extend to the foot and not leave that white space below. This probably happens because the purple box has a fixed height. If you define a height for a page but add a footer that stays at the bottom, then if this height is shorter than the height of the view, the height of the page will increase to fill the view so the footer stays at the bottom of the view, revealing the fixed height of the purple box. This is a problem I've also faced: how do I tell Muse that the box should extend to the height of the page and not be of a fixed height?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 10, 2014 Jan 10, 2014

Copy link to clipboard

Copied

I have retty much the same problem, trying to get a disqus blog embedded into my site which works fine, the side purple box  moves bottom edge with the footer, but the top edge also moves, I want to lock the top edge but the bottom edge expands to the depth of the right hand content.

Probably me doing something but hey maybe there is a solution !Ninas blog.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 13, 2014 Aug 13, 2014

Copy link to clipboard

Copied

2. There is a lot of content and you want the footer on the bottom of the browser irrespective of the content.

- Pin it to the bottom of the browser. While scrolling if you want the content to go behind the footer...

--------------------------------------------------------------------------

i struggle to understand how you made it?? it s exactly what i want for my home page

www.clairepons.com

i tried to add exactly this kind of footer to my home page but it doesn t stay on the bottom of my browser

thanks a lot

Capture.JPG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 16, 2017 Nov 16, 2017

Copy link to clipboard

Copied

How did you do this in muse?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 20, 2017 Nov 20, 2017

Copy link to clipboard

Copied

LATEST

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2014 Oct 24, 2014

Copy link to clipboard

Copied

I have a similar issue- in that I have footers that are appearing in the middle of the page in preview- does anyone know how to fix this?

thanks

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines