you are reffering to a page ( you link above https://kriesi.at/support/topic/open-popup-modal-with-button/ ) – there are several snippets – but this is an older topic – you have to replace that line with mine – not to replace the whole code . This is mikes link to Ismaels Post . You see that here is the setting of no-scroll class on the initiating anchor. And you see that there is window on load.
___________
Some info on that.
So you have placed a hidden code block on the page. That codeblock got an unique ID – and an anchor is linking to that ID.
How would a (non-lightbox) link to an ID on the same page behave?
You click it, and it scrolls to the anchor there.
The trick with this modal window is that the html code is inside a code block. Nevertheless, the code block is in a place inside your DOM. So if this codeblock is at the bottom – the modalwindow opens, but still the window scrolls to the place where the codeblock is in the layout. This can be prevented in Enfold, by setting the class no-scoll to that link.
The fact that the background no longer moves with the scroll when the lightbox is open has become standard – or so I thought. (This is what Mike had recommended and belongs to the earlier solution to assign the property overflow-y: hidden to the html.
If you could please post your snippet here, then I can tell you better in this regard what to change.
Hi,
To not have a menu icon in mobile for your sub-menu please change the Mobile Menu Display option to Display Full Menu

As for having a sticky sub-menu on mobile, I have a solution that works on an Enfold install, but it doesn’t seem to work on your site, perhaps due to your sub-menu has the menu button showing right now, but you can try.
Try adding this code to the end of your functions.php file in Appearance ▸ Editor:
function custom_script() { ?>
<script>
(function($){
$(function() {
var scroll_start = 0;
var startchange = $('#sub_menu1');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
document.getElementById('sub_menu1').classList.add('sticky-top');
} else {
document.getElementById('sub_menu1').classList.remove('sticky-top');
}
});
}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');
and add code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
.sticky-top {
position:fixed!important;
top:0!important;
z-index:10000!important;
}
if this doesn’t work Please include an admin login in the Private Content area so we can investigate.
Best regards,
Mike
Hey covaun,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (min-width: 990px) {
.home #av-layout-grid-1 .avia-button-wrap {
position: absolute;
bottom: -100px;
}
}
Best regards,
Rikard
Hi. I would like to create a store on my existing website using a buy button from Shopify. I would like to create the Shopify store from my wordpress site via Enfold. Unfortunately, as soon as I create a new page and insert a code block or text field “text” using the code snippet from Shopify via Avia Layout Architect Builder, it doesn’t work. However, as soon as I create a new page and switch to “Text” in the normal text editor, it works. But since I would like to create a responsive page with Avia Layout Architect Builder, it would be great if you could help me here.
Thank you very much.
Br, Harry
Hi Rikard. I don’t understand: the online site is on SiteGround
https://trikego.com/
and when I update Enfold from 4.8.7 to 4.8.7.1 (I just did it and immediately restored copy of restore) it happens that the image customizations are lost

and buttons

ONLY IN THE ENGLISH VERSION (the second language).
While on the site staging, I see that you have updated to 4.8.7.1 and those problems are not found: I go crazy !!! What can it depend on?
-
This reply was modified 4 years, 5 months ago by
Bruno. Reason: images
I fixed this problem by deleting both the video players on the page and then recreating them. They are now playing properly. There is a delay from when the video first displays and when the play button appears as an overlay and is active. Sort of like a refresh. With the existing Enfold video player they never displayed after the refresh. By recreating them, they now work.
Roger
Hi,
Thank you, it is better but not really what I wanted, the “request a quote” button is still bigger than the other. Do you know why the buttons don’t have the same design ? I tried to style them via enfold –> advanced styling but nothing changed.
https://v99dqr23s6x.c.updraftclone.com/en/produit/testo-310-lanalyseur-de-combustion-dedie-aux-installateurs/
Thank you very much for your help
Hey Thomas Sommer,
Thank you for the inquiry.
Please follow the steps below in order to find the purchase code and use it to create an account here in the forum.
Where do I find my ThemeForest purchase code?
1.) Sign in to your ThemeForest account.
2.) Go to your Downloads page.
3.) Click the big Download button next to your theme.
4.) Click the “License certificate and purchase code” link.
5.) Open the text file and locate your Item Purchase Code.
The support license code should be located in the same panel.
You will also have to register the theme or get an Envato token.
Here’s how: https://kriesi.at/documentation/enfold/theme-registration/
Best regards,
Ismael
Hey,
Thanks for contacting us!
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
a.add-request-quote-button.button {
font-size: 12px;
}
.single-product .summary .cart {
float: left;
max-width: 140px;
}
.single-product .yith-ywraq-add-to-quote {
margin-top: 55px;
}
Best regards,
Yigit
Hello,
I would like to reduce the « request a quote » button to the same size as the « add to basket button ». I tried to change the size via advanced style in enfold setting but it’s not changing anything. Also the two buttons don’t have the same color, I don’t understand why. I just want two buttons that look the same (I want the request a quote button to look the same as the add to basket button).
I would also like to change the location of the « add to basket » button, I want it right next to the « request a quote button » . I didn’t find any css code for that.
https://v99dqr23s6x.c.updraftclone.com/en/produit/testo-310-lanalyseur-de-combustion-dedie-aux-installateurs/
PS : When I logged in to open a new subject on this forum, I had a message telling that my license has expired. I had to repurchase the theme to have access to the forum support. Should I install this new license or is it just to have an access again to the support forum ?
Thank you in advance for your help
Sorry about the login details. I’ve updated the password and checked that it’s good. See below.
Did you toggle or temporarily disable the Enfold > Performance > File Compression settings
As I said above, I followed your instructions. Also, as mentioned above, I can see that the CSS file with suggested declaration is requested and downloaded by browser correctly. However, the declaration is not being applied.
If I remove the media query the map is hidden as expected. If I nest the declaration in a media query, it is not applied when the media query requirements are met.
BTW, I want to share some screenshots with you. I uploaded to imgur.com but cannot make the images visible with tool img button. Please tell me how to share screenshots uploaded with imgur.
The imgur link is: https://imgur.com/a/nfA69Ax
Hi,
Thank you for your patience.
While the devs are working on a solution, try to edit the gallery element and set the Advanced > Link Settings > Image Link settings to the last option (no links) to disable the links completely. We will also have to modify the enfold/config-templatebuilder/avia-shortcodes/gallery/gallery.js file directly to replace mouse hover with click. Look for this code around line 33..
gallery.on('mouseenter','.avia-gallery-thumb a', function()
,.. and replace it with.
gallery.on('click','.avia-gallery-thumb a', function()
After that, add this code in the functions.php file to re-enable the lightbox for the gallery.
function av_popup_gallery(){
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('.avia-gallery-big').removeClass('noLightbox avianolink fakeLightbox');
$('.avia-gallery-big').magnificPopup({
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>', // Popup HTML markup. <code>.mfp-img</code> div will be replaced with img tag, <code>.mfp-close</code> by close button
cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor.
titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
// Or the function that should return the title. For example:
// titleSrc: function(item) {
// return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
// }
verticalFit: true, // Fits image in area vertically
tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
}
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_popup_gallery');
Please do not forget to toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the steps above.
Best regards,
Ismael
Hi,
Thanks for contacting us!
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
.mejs-overlay-button {
background-color: rgba(0,0,0,0.5);
border-radius: 100px;
}
0,0,0 is the RGB value of the color and 0.5 is opacity level.
Best regards,
Yigit
Hey Rikard,
I am sorry to say: but your way of updating is a pain in the a**
Getting the personal token? Why? Other providers can work just with the purchase code.
Why a 6-step update to-do list, when others are able to implement just adding purchase code and a button called “update”.
I tried the personal token, but since we bought many (!!!) licences of Enfold in different projects, I don’t know if the personal token is related to one licence or to the account, on top it’s a hazzle.
I tend to switch to another theme, as lately Enfold is causing more and more trouble and also the functionality, that 5 or 6 years have been advanced, are rather standard in today’s themes.
–> so unfortunately I don’t feel able to update with this list, please provide an easier way!
Thanks!
Hi,
You should be able to set the colours of your choice in the General Styling tab in the element options. If you want separate styling for your buttons, then you can set that under Enfold->Advanced Styling.
Best regards,
Rikard
Hey Dameon Jamie,
We don’t delete things on customer sites without asking permission first. You can use this link to open a new thread, or click this button on the Enfold sub forum: https://imgur.com/a/AnoSPNb
If the details you sent us are not currently in use, then please delete the user and change all your passwords.
Best regards,
Rikard
Hi dameonjamie,
We don’t delete things on customer sites without asking permission first. You can use this link to open a new thread, or click this button on the Enfold sub forum: https://imgur.com/a/AnoSPNb
Best regards,
Rikard
Thank you.
the code behind the link is:
Buchen
The a class “open-popup-link” is the one who is responsible for opening the content in a popup.
I found the information that the a class “open-popup-link” is a feature already provided by enfold and it works.
But what would the Code be for the Button?
Hey sensiblekaren,
Thank you for your question, try adding the custom class “round-submit” to your contact form element

then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
.avia_ajax_form.round-submit .button {
border-radius: 100px;
min-height: 142px;
}
this is the result on the basic Enfold demo:

you can adjust to suit your site.
Best regards,
Mike
Hello
I have an Enfold contact form set up and want to change the submit button to a button with rounded corners to a circle is this possible with quick CSS? Thank you
Hi Enfold Team,
We met a issue that when we created two pages with the “blog post” element.
We defined the Page A to show the post with category A and Page B to show the post with category B.
When the visitors visit the page A and Page B, the menu item is highlighted correctly.
Please see the image below
https://ibb.co/fXh1q7H (page A)
https://ibb.co/dK3jQ6m (page B)
However, when the visitors visit the post from Page A or Page B, the menu item will only highlight the Page A.
https://ibb.co/qRNvQBx (before visiting the post content)
https://ibb.co/2sjpd9X (after clicked the “read more” button)
Would i have any suggestion or patch on this behaviour?
As this may affect the user experience when they are reading the content and find out the highlighted menu item is not corresponding to the content.
Many thanks.
For addition information,
we have located the behaviour is due to the logic for applying the “current-menu-item” css class in file “helper-responsive-megamenu.php”.
But we are not sure how to change it to align our customer expectation. therefore we need some advise on this.
Thank you very much.
Hello is possible to make code for floating button, for example call and shop to show on all pages with Enfold resources.
Thanks
Hey evanh_,
Thank you for the inquiry.
You can use the avf_social_icons_options filter to include more options in the social icon list and the avf_default_icons filter to assign a new icon to the new option. Please check the following documentation for more info.
// https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options
You can also add custom font icons using the theme’s Import/Export > Iconfont Manager.
// https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-
Best regards,
Ismael
I have tried your suggestion. Your selector is correct (as are the examples I gave in first post showing failed attempts). However, it still fails to hide the element on narrow screen widths.
@media screen and (max-width 768px) {
#footer .widget .leaflet-map {
display: none !important;
}
}
I can confirm that the styles.css (and your suggested code) is loading correctly.
BTW: I attempted to add Leaflet element into page using Avia Layout Builder. The button for the Leaflet however is disabled – hovering over the button shows “This element has been disabled […] You can enable it in Enfold -> Theme Extensions -> Leaflet Maps.
Like the suggestions made in your earlier posts, this menu option does not exist. Am I using an out-of-date theme? Are the instructions out-of-date?
This reply has been marked as private.
Hey Monika,
Thank you for the inquiry.
How did set the content to open inside a lightbox? You may need to apply a custom css class name or ID to the button in order to trigger the lightbox popup.
// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
Ismael
Hi,
I am running (updated) Enfold ver 4.8.7.1 and WP 5.8.1
When I add or modify any button or Section Color Background, they are all in “WHITE” color and can’t be changed.
Font color has to be manually set on the main Text Box, setting it in Font Colour in the Styling Tab section doesn’t work.
I am not very technical, any help would be appreciated.
Zach
Hi. By updating the theme, the customization of the images is lost (they become round) and the buttons return, I think, as default, without the customizations made with the css.
Right home page, before the last update

Home page with errors, after updating Ebfold

page with right customization (before Enfold update)

page with lost personalization (after Enfold update)

Even with the previous update I had some problems, solved thanks to your support. I had backed up and restored it, so now there are customizations
https://trikego.com/it/
and I’m using the previous version, 4.8.7. Kind regards. Bruno
log in privately
Ich habe WordPress und Enfold mehrfach neu installiert, alle Plugins deaktiviert und nacheinander wieder aktiviert – nichts hat den Fehler behoben.
Auf der Seite https://www.mindrooms.net/ funktionieren keine Ankerlinks aus dem Text oder von Buttons.
Jedes Linkziel lässt sich durch Eingabe in die Browserzeile einwandfrei aufrufen: https://www.mindrooms.net/#the-story-behind-mind-rooms
Aber es funktioniert nicht, die Ankerlinks aus dem Text heraus oder über Buttons anzusteuern.
Vielen Dank schon jetzt für jede Hilfe!
I have reinstalled WordPress and Enfold several times, disabled all plugins and re-enabled them one by one – nothing fixed the error.
Any link target can be accessed perfectly by typing in the browser line: https://www.mindrooms.net/#the-story-behind-mind-rooms
But it does not work to access the anchor links from the text or via buttons.
Thanks already for any help!