Archived topic
Implementing a fixed footer section on mobile.
9 replies · Started by Hafsa on March 4, 2020
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?
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.
done. i wish to get the red ticker become the fixed footer at the bottom of the mobile screen.
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.
Sorry, noob question but where exactly do i add this CSS?
This article explains:
https://docs.generatepress.com/article/adding-css/
TLDR: Simplest way is to add to: Customizer > Additional CSS
It works, thank you!
Awesome - glad to be of help
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.
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.
