Highlighted

Sticky Footers & Page versus Site Properties

Adobe Community Professional ,
Nov 25, 2018

Copy link to clipboard

Copied

I would like the black bar at bottom and icons to always show no matter how tall the browser window.

Home Inspections | Vesta Home Inspections

Screen Shot 2018-11-25 at 8.47.38 PM.png

I believe that means I need sticky footer on, unless I am misunderstanding Adobe Help. I set sticky footer on all page and site properties for desktop, Tablet and Phone designs The site is really simple and one of my first designs so any input to improve is welcomed. I am confused as to why there is btoh site and page properties and how they might override each other.

Screen Shot 2018-11-25 at 8.53.48 PM.png

„Sticky Footer“ checked: The footer elements are show always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is placed at the bottom of the browser window.

„Sticky Footer“ unchecked: The footer elements are always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is still placed at the bottom of the page (not the browser window).

If you want elements to be always shown at the bottom of the window (not the page), place the elements at the very bottom of your page and check one of these pinning options:

Screen_01.jpg

Views

387

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

Sticky Footers & Page versus Site Properties

Adobe Community Professional ,
Nov 25, 2018

Copy link to clipboard

Copied

I would like the black bar at bottom and icons to always show no matter how tall the browser window.

Home Inspections | Vesta Home Inspections

Screen Shot 2018-11-25 at 8.47.38 PM.png

I believe that means I need sticky footer on, unless I am misunderstanding Adobe Help. I set sticky footer on all page and site properties for desktop, Tablet and Phone designs The site is really simple and one of my first designs so any input to improve is welcomed. I am confused as to why there is btoh site and page properties and how they might override each other.

Screen Shot 2018-11-25 at 8.53.48 PM.png

„Sticky Footer“ checked: The footer elements are show always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is placed at the bottom of the browser window.

„Sticky Footer“ unchecked: The footer elements are always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is still placed at the bottom of the page (not the browser window).

If you want elements to be always shown at the bottom of the window (not the page), place the elements at the very bottom of your page and check one of these pinning options:

Screen_01.jpg

Views

388

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
Nov 25, 2018 0
LEGEND ,
Nov 26, 2018

Copy link to clipboard

Copied

„Sticky Footer“ checked: The footer elements are show always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is placed at the bottom of the browser window.

„Sticky Footer“ unchecked: The footer elements are always at the bottom of the page. If the page is „smaller“ than the browser window, the footer is still placed at the bottom of the page (not the browser window).

If you want elements to be always shown at the bottom of the window (not the page), place the elements at the very bottom of your page and check one of these pinning options:

Screen_01.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
Reply
Loading...
Nov 26, 2018 0
Adobe Community Professional ,
Nov 26, 2018

Copy link to clipboard

Copied

My page is longer, so not sure if I am understanding sticky footer correctly. Seems sticker footer so for the opposite of what I have, and nto sure how that applies to long web pages displaying on smaller monitors,

I do have sticky footer checked, but the elements are on the master page. Should I move them to my from my master page to my actual webpage?

Will work on this tonight when I get home from work as you have provided me with some ideas to try, thankyou so much for your reply.

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
Reply
Loading...
Nov 26, 2018 1
Adobe Community Professional ,
Nov 26, 2018

Copy link to clipboard

Copied

Günter Heißenbüttel​ already gave the correct answer.

There are two issues.

1) Site/Page properties: sticky footer a) checked/b) unchecked

a)

Bildschirmfoto 2018-11-26 um 16.55.36.png

b)

Bildschirmfoto 2018-11-26 um 16.55.07.png

What you want is done by pinning:

Bildschirmfoto 2018-11-26 um 16.53.01.png

and could lead to this:

Bildschirmfoto 2018-11-26 um 17.00.05.png

Header and footer is pinned.

Site properties and page properties do the same to sticky footer. One for the single page, one for the whole site.

Kind Regards,

Uwe

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
Reply
Loading...
Nov 26, 2018 1
Adobe Community Professional ,
Nov 28, 2018

Copy link to clipboard

Copied

Danke Herr Günter & Uwe,

My apologies for not getting back sooner, my hours have been late as we have a big push for holidays, and wanted to review/experiment so as not to take up that much of your time.

Yes Günter was correct on pinning resolving on the desktop. Unfortunately I cant get this to work on the mobile or tablet version. Is very important especially for this site as the target audience excesssively uses mobile and tablets.

Screen Shot 2018-11-28 at 11.51.58 PM.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
Reply
Loading...
Nov 28, 2018 0
Adobe Community Professional ,
Nov 28, 2018

Copy link to clipboard

Copied

On tablet and on mobile you could try it then only with scroll effects. Tablet works quite well.

Scroll effects work only with "fixed width breakpoints" instead of fluid width breakpoints.

As you go with adaptive design, you could easily give that a try.

Let me add from design point of view that footer and header on a mobile phone cover a lot of space, doesn`t it?

My experience on mobile, people are used to scroll up and down to get the information.

To use a hamburger a whatever menu in the header might still be helpful in some cases.

Pinning for mobiles is not recommended, though, scroll effects are usable, in my experience – you should properly check

on some devices if it really works on different OS.

Hope that helps,

Uwe

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
Reply
Loading...
Nov 28, 2018 1
Adobe Community Professional ,
Nov 29, 2018

Copy link to clipboard

Copied

You have an excellent point on the mobile devices, I may be trying to achieve too much with  space available on mobile.

For mobile version  phone number and branding  I may just move the certification logos out of the footer and into the About section, to give them more attention and leave the footer a black bar.

Not sure I am so good on typography/design for web. Please let me know if you have any design suggestions. I tried a more unique color scheme as wanted the website to have a lasting impression, but the logo may need tweaking, as something feels off.

For vertically centering type seems I have to manually adjust for each version and use a different values, so I may not be seeing a better way to do this.

Thankyou to you both for sharing your wealth of experience, please share any favorite Muse training videos.

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
Reply
Loading...
Nov 29, 2018 0
LEGEND ,
Nov 29, 2018

Copy link to clipboard

Copied

Here you find a lot of Muse jam sessions by the former Muse product manager Dani Beaumont: https://www.youtube.com/results?search_query=dani+beaumont+muse

And not to forget the „official“ tutorial site: https://helpx.adobe.com/support/muse.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
Reply
Loading...
Nov 29, 2018 1
Adobe Community Professional ,
Nov 29, 2018

Copy link to clipboard

Copied

Great I have done Lynda.com with Dani, but look forward to doing these Jam sessions.

Disapointed Muse is no longer being updated, but may find some time over holidays to try some of the other Adobe options or WIX again since they may have updated alot since. Previous to HTML 5, I had a very good grasp of Dreamweaver but now feel that maybe Dreamweaver will not be the tool to create clean sites quickly.

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
Reply
Loading...
Nov 29, 2018 0