Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 7, 2021 at 3:17 am #1270738
    projectt_co_uk

    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

    January 7, 2021 at 7:00 am #1270789
    Jordan Shannon

    Hey projectt_co_uk,

    Perhaps a plugin would work for this?

    Smart Floating / Sticky Buttons – Call, Sharing, Chat Widgets & More – Buttonizer

    All-in-one Floating Contact Form, Call, Chat, and 50+ Social Icon Tabs – My Sticky Elements

    Best regards,
    Jordan Shannon

    January 8, 2021 at 2:19 am #1270980
    projectt_co_uk

    Hi 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,

    January 10, 2021 at 4:43 am #1271277
    Rikard

    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,
    Rikard

    January 12, 2021 at 1:39 am #1271718
    projectt_co_uk

    Hi,

    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 icon

    so 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,

    January 13, 2021 at 4:34 am #1272012
    Rikard

    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,
    Rikard

    January 14, 2021 at 8:51 pm #1272528
    projectt_co_uk

    Hi 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,

    January 14, 2021 at 9:56 pm #1272532
    projectt_co_uk

    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,

    January 14, 2021 at 10:03 pm #1272535
    projectt_co_uk

    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

    January 15, 2021 at 4:59 pm #1272779
    projectt_co_uk

    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.png

    Mobile
    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.jpg

    Please please can someone help me with this?

    Kind regards

    January 19, 2021 at 12:28 pm #1273666
    Yigit

    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,
    Yigit

    January 20, 2021 at 1:53 am #1273863
    projectt_co_uk

    Hi @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.

    January 20, 2021 at 10:31 am #1273962
    Yigit

    Hi,

    I added following code to bottom of Quick CSS field

    #top #donate.av-fullscreen-button .avia-button-fullwidth {
    padding: 30px 10px;
}

    and changed “margin-top: 130px;” into “margin-top: 90px;”.

    Please review your website :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.