-
Posts
-
Hi,
Please can you guide me how can I create a sticky button which only shows on mobile. I basically want to create a button which I want to create with custom link (e.g. Book Now or Donate Now) I will put my own link.
I want the button to permanently show on mobile screens when they are scrolling up and down.
I want to create this on multiple website I have on enfold. I will give you link to two in private section.
Your help is always appreciated.
Kind regards
Hey projectt_co_uk,
Perhaps a plugin would work for this?
Best regards,
Jordan ShannonHi Jordan,
Thank you for your reply.
Unfortunately, this is not something I am looking for.
I need want to add a button to the top of my mobile feed which stays there as the user scrolls down.
I will be calling the button Donate Now.
I want it to be a full width button for mobile.
Looking forward to receiving your reply.
I have always added a button to header on http://www.viaremovals.co.uk but on mobile it doesn’t work properly. That’s why I have disabled it on mobile. You can see the code in child theme function file.
Kind regards,
Hi,
Thanks for the update. You can do that if you turn your header sticky on mobile: https://kriesi.at/documentation/enfold/header/#sticky-header-on-mobile. Then you can add the button in a widget: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area. We can help you out with styling, once you have added it.
Best regards,
RikardHi,
Thank you for your help.
I have followed your steps on another website. http://www.humanitycarerelief.org.uk
As you can see I have a donation button on desktop and mobile. However, I had to position the button on the desktop to show it in the white space.
I want to do this.
I want to leave the button as it is on the desktop
I want to show the button as fullwidth on mobile above my logo and burger menu iconso basically I want two buttons
one to show on desktop according to the header position
second to show on mobile sticky full-width on top of the page.Please can you help me urgently as it is not looking right on mobile?
I have tried adding the HTML for the full-width button but it breaks down the whole website’s responsiveness.
I would appreciate if you can help me resolve this. I have provided the details in the private message section.
Thank you in advance.
Kind regards,
Hi,
Thanks for the update. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header { top: 100px; } #header .widget { left: 0; top: -38px; transform: translate(0%); width: 100%; padding: 0; } #header .widget a { margin-top: -18px; } }Best regards,
RikardHi Rikard,
This has totally messed up the layout on mobile.
I want the button to be full length above the header.
Please can someone help.
Kind regards,
This is what I am trying but the button is showing on the logo .. Rikard’s solution doesn’t work as it adds extra space above the header and makes the button completely out of line.
**In Header Widget I have added**
[av_button_big label='DONATE' description_pos='below' icon_select='yes-left-icon' icon='ue806' font='entypo-fontello' link='manually,https://www.humanitycarerelief.org.uk/donations/support-humanity-care-relief-projects/' link_target='' size='large' position='center' icon_select='yes' icon_hover='aviaTBicon_hover' icon='ue82b' font='entypo-fontello' color='custom' custom_bg='#db332a' custom_font='#ffffff' admin_preview_bg=''][/av_button_big]
**In Function.php I am adding**
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}**In Quick CSS I have added**
@media only screen and (min-width: 990px) {
#header .widget { display: none !important; }
}custom_html-2 .custom-html-widget {padding: 0 50px; width: 767px;
margin: auto;}
#custom_html-2.widget {background-color: #ffcd03;}
#custom_html-3 .avia-button.avia-size-large {
font-size: 20px!important;
}
@media only screen and (max-width: 767px) {
#custom_html-2 .custom-html-widget {
width: auto;
}
}
#header .widget {
left: 0;
top: -5px;
transform: translate(0%);
width: 100%;
padding: 0;
}What I want to achieve.
I want to have a Full-Length Sticky Button above Header on Mobile ONLY. I don’t want the header (logo and burger menu to be sticky)
Right now my button is of full length but the layout of the whole website is broken. It is also showing the button on desktop but it shouldn’t as my CSS is telling it to hide the button on the desktop.
Please your help is urgently needed.
Kind regards,
I have the same issue on http://www.viaremovals.co.uk but on this one I want to show one button on desktop and one of mobile.
Desktop is working but the mobile layout is all messed up.
Please HELP URGENTLY.
Kind regards
Hi,
I had to disable the code as the website was completely broken and for 19 hours I haven’t received a response.
I have taken the screenshot of the issue for Desktop issue and Mobile Issue
Desktop
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/HCR-Page-Capture.pngMobile
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-1.jpg
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-2.jpg
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-3.jpg
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-4.jpgPlease please can someone help me with this?
Kind regards
Hi,
We are sorry for the late reply!
1- I added the following code to functions.php of your child theme right below the code you commented out.
2- Then I added following code to bottom of Quick CSS field@media only screen and (min-width: 480px) { #donate { display: none !important; } } #donate { position: fixed; top: 0; width: 100%; z-index: 999; } @media only screen and (max-width: 480px) { #wrap_all { margin-top: 130px; } }Donate button is hidden on screens above 480px and below it is sticky and content is pushed down 130px, the height of your button.
Please review your website :)
Best regards,
YigitHi @Yigit
Thank you for your help.
It’s great what you have done.
Just one change and I think we have it working.
The Donate Button is too large (height) I want it to look like a normal button height.
You mentioned that I can change this to adjust the height of the button
margin-top: 130px;but when I change that it hides the header.
Please can you let me know how can I make it normal height button.
Once again I appreciate all your help.
Thank you.
- You must be logged in to reply to this topic.