Create Button In Header for Desktop Version and top for mobile

Hi,
By copying the settings from another thread I managed to create the button here http://new.viaremovals.co.uk/

however I would like the button to be narrow and thin like above the header
At the moment it is showing very thick button.
Please can someone guide

FYI and Special thanks to @Guenni007 (https://kriesi.at/support/topic/social-icons-in-the-footer-3/#post-942800)

I did the following

Copied the following code to Child Function.php

add_action(‘ava_main_header’, function() {
echo ‘<div class=”button-on-top”>’;
echo do_shortcode(“[av_button_big label='Our Reviews on Yell.com' description_pos='below' link='manually,https://www.yell.com/biz/via-removals-and-storage-ltd-colne-7835837/' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#000000' color='custom' custom_bg='#fad800' color_hover='custom' custom_bg_hover='#d9751a' custom_class='' admin_preview_bg=''][/av_button_big]“);
echo ‘</div>’;
});

Then copied the following in quick CSS

#top #button-on-top .avia-button-fullwidth {
padding: 10px 0px;
}

The button works but as I said above the I want to make it narrow.

• This reply was modified 5 years, 9 months ago by projectt_co_uk.

I have got the button in place now.

I have inserted this code

[av_button_big label='Our Reviews on YELL.COM' description_pos='below' link='manually,https://www.yell.com/biz/via-removals-and-storage-ltd-colne-7835837/' link_target='_blank' icon_select='yes' icon_hover='aviaTBicon_hover' icon='ue82b' font='entypo-fontello' color='custom' custom_font='#000000' color='custom' custom_bg='#fad900' color_hover='custom' custom_bg_hover='#e67227' custom_class='' admin_preview_bg=''][/av_button_big]

However it is not showing the icon on the button I would like to show love heart icon on the button.

Please can you help.

Kind regards,
http://www.projectt.co.uk

Hi Victoria,

Yes I managed to resolve the issue…

Thank you for your help.

Kind regards,
http://www.projectt.co.uk

Hi,

I know this an old thread.

But the issue is the same.

The above solution which worked at the time has stopped working since the update. I am not sure what has changed but the buttons are now broken on mobile.

Desktop seems to working okay.

Please can someone help.

I am having a similar issue on another website for which there is another case logged.

I had to disable the code as the website was completely broken. I am having the same issue across multiple websites.

Another ticket logged here with the similar issue.

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

Hi Victoria,

I will break it down for you.

I want to create a full-width sticky button above the header.

I did the following to implement it
**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;
}

Once I done that … then the layout of my website broke down.

See screen shot #1
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-1.jpg
What’s wrong with this screen shot
1. look at the height of the button
2. where is the burger menu
3. it is showing social icons when it shouldnt show
4. Save Live in Yemen (it is showing two banners whilst top one is for Desktop and the bottom one for mobile

See screen shot #2
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-2.jpg

Mobile view is showing 3 column when it should show each image in single column

See screen shot #3
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-3.jpg

Same issue as above

See screen shot #4
https://www.humanitycarerelief.org.uk/wp-content/uploads/2021/01/Mobile-4.jpg

Same issue as above the whole mobile layout is broken.

I had to disable all the codes on the website as I wasn’t getting any response from the support team. Because I cannot leave the website in this state.

There is something wrong with the HTML code but I am struggling to figure out what.

Because as soon as I enable that this happens.

So far everytime I had a problem your support team has helped me but this time it’s been slow.

If you see this ticket and the other ticket I have provided login details at both of them so if you want you can login and enable those codes and see it yourself.

Looking forward to hearing from you.

PS. if you can give me exact UK time when you are online to see this then I can enable the code so you can see the live website being affect by this.

Kind regards,

http://www.projectt.co.uk