- This topic has 9 replies, 2 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
March 4, 2020 at 10:34 am #1185088
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.jpgPlease 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?
March 4, 2020 at 5:11 pm #1185332David
StaffCustomer SupportHi 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/March 5, 2020 at 4:21 am #1185672Hafsa
done. i wish to get the red ticker become the fixed footer at the bottom of the mobile screen.
March 5, 2020 at 5:45 am #1185737David
StaffCustomer SupportAdd 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/March 5, 2020 at 6:23 am #1185777Hafsa
Sorry, noob question but where exactly do i add this CSS?
March 5, 2020 at 6:41 am #1185802David
StaffCustomer SupportThis 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/March 5, 2020 at 6:56 am #1185982Hafsa
It works, thank you!
March 5, 2020 at 7:48 am #1186050David
StaffCustomer SupportAwesome – glad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 6, 2020 at 4:37 am #1186825Hafsa
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.
March 6, 2020 at 7:05 am #1187098David
StaffCustomer SupportYou 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/ -
AuthorPosts
- You must be logged in to reply to this topic.