Implementing a fixed footer section on mobile.

[Hafsa]

Just as I have a fixed header menu (via the “Use Navigation as Header” option), I want to also have a fixed footer section on mobile. The goal is to have a news ticker within constantly on the bottom on mobile. (the ticker i have already implemented).
E.g. https://i.ytimg.com/vi/u5a_SGfWv4Q/maxresdefault.jpg

Please advise on how that can be achieved, thanks.

P.S. To amp up the challenge, is it possible to have it differently placed on desktop?

[David]

Hi there,

can you provide a link to your site. You can edit your original topic and use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hafsa]

done. i wish to get the red ticker become the fixed footer at the bottom of the mobile screen.

[David]

Add this CSS:

@media (max-width: 768px) {
    .mobile-fixed-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
    body { 
        padding-bottom: 40px;
    }
}

Then edit the Container Block with the ticker inside, on the Right Hand Settings sidebar add mobile-fixed-footer to the Advanced > Additional CSS field.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hafsa]

Sorry, noob question but where exactly do i add this CSS?

[David]

This article explains:

https://docs.generatepress.com/article/adding-css/

TLDR: Simplest way is to add to: Customizer > Additional CSS

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hafsa]

It works, thank you!

[David]

Awesome – glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hafsa]

Hi, One more question – for the same website – on desktop – how can i stick/ anchor the same ticker container to the navigation bar?

It’s working just fine on mobile.

[David]

You would need to use a Hook Element to add the ticker shortcode:

https://docs.generatepress.com/article/hooks-element-overview/

Wrap the shortcode in a container so it can become the sticky footer for mobile ie.

<div class="sticky-ticker mobile-fixed-footer">
<!-- Add the shortcode here -->
</div>

Then choose the inside_navigation hook so it sits inside the same container. Then i would need to see it to provide some CSS for positioning.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts