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

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

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,

• This reply was modified 3 years, 10 months ago by 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,

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,

• This reply was modified 3 years, 10 months ago by projectt_co_uk.

It was caused by a security plugin … we uninstalled and reinstalled the plugin and it is all working now.

Thank you for looking into.

Hi @ismael,
Please see below the two screenshots from video playback from my website https://www.theultimatesecret.co.uk

As you can see that in the first screen shot it shows the video name and the channel icon in the top left hand corner.

In the second screenshot it shows the YouTube control icons in the top right and bottom right hand corners.

https://www.theultimatesecret.co.uk/wp-content/uploads/2019/03/Video-Play-Back-Showing-the-Video-Title-1.png
https://www.theultimatesecret.co.uk/wp-content/uploads/2019/03/Video-Play-Back-Showing-the-Video-Title-2.png

Please can you help me as to how can I disable these so that it only shows the video.

I am using Firefox browser when I have taken these screen shots.

Kind regards,

http://www.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

Ohh finally I forgot to ask Can I include an image in the button or an icon in the button?

How would I do that?

And it is showing as round button on some screens. I would like it to be straight full screen.

Check here: http://new.viaremovals.co.uk/product/house-removal

Thank you.

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

Managed to sort it out myself … using your wonderful forum and supporting document.

:)

You can close the ticket.

I used following codes

.catalouge-font .av-catalogue-content {
color: #5b5b5b!important;
}

.av-catalogue-content {
color: white!important;
}

.catalouge-font .av-catalogue-title {
color: #81204c!important;
}

.main_color .av-catalogue-list li:hover {
background-color: inherit;
}

ul.av-catalogue-list, .av-catalogue-list li {
border: none;
}

.catalouge-font .av-catalogue-list li .av-catalogue-price {
color: #81204c!important;
}

Not sure if I can combine them into one … but it is working now.

Thank you.

I have tried everything and it still didn’t work.

Sorry Vinay,

it took me a while to act on your instructions.

I have added the font using the instructions.

The font is showing correctly on Mozilla Firefox on computer, however the font doesn’t display at all on other browsers and on mobile devices.

I have tried it on iPhone, iPad, Andriod but still the font doesn’t display.

Please can you help.

Thank you,

Apologies for the delay …

Was enjoying the nice weather here in the UK for last couple of days (We don’t get many nice weather days in the north of UK)

I have applied the code and all looks good.

Once again thank you very much for all your help.

Look forward to hooking up again on another thread about another website :)