Hi,

@Kahil I tried to simulate this by adding a button to one of my pages for it to open the editor in a popup iframe, but I noticed that the link had two question marks where you should only use one, so please try this format:
http://test.test/wp-admin/post.php?post=626&action=edit&iframe=true

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 989px) {
  .html_stretched.responsive.html_mobile_menu_tablet.html_header_top #top #main {
    margin-top: 90px !important; 
  }
  .html_stretched.responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed !important; 
  }
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, and thank you for the login, I have investigated your issue with the button colors and found that your default color options are not correct, in this screenshot I compare my theme color options with yours and you will see that you are missing the “Theme Color Highlight” option:

but if you look at the source code for the element you will see that when you choose “Theme Color” it is actually setting the “Theme Color Highlight” option:

when I change the language setting in the user profile for the “enfold” user that you gave us to English the correct “Theme Color” color option returns. I was able to reproduce this error on my localhost.
So I edited the fr_FR language files to correct this and it seems to work on my localhost, so please try downloading the language files linked in the Private Content area and upload them to your site via FTP at \wp-content\themes\enfold\lang\
please save a copy of your original files in case you encounter an error.
fr_FR.po & fr_FR.mo
I used Google Translate to make “Theme Color Highlight” read “Surbrillance de la couleur du thème” I hope this is correct.
After you upload the files please clear your browser cache and try selecting the colors again for the buttons to see if you have the correct options.

Best regards,
Mike

Hi,
It seems the login token has expired, please update.
I believe we are going to need to move the layerslider background image up a little because it contains the white space under the header. See here:

Best regards,
Mike

Hi,

@jr-music thanks for the login, you wrote:

Once I renamed the folder everything was white and nothing was working so I had to revert

so did you do this via FTP? You would rename your old theme “enfold-old” and your new theme “enfold” via FTP whichever theme folder is named “enfold” is the one that will be active.
The only customization I saw in your functions.php was:

/**
 * Remove the generated product schema markup from Product Category and Shop pages.
 */
function wc_remove_product_schema_product_archive() {
	remove_action( 'woocommerce_shop_loop', array( WC()->structured_data, 'generate_product_data' ), 10, 0 );
}
add_action( 'woocommerce_init', 'wc_remove_product_schema_product_archive' );

so you will want to add this to your new functions.php after renaming the theme folders, do you think there are other files that have been edited?
If you still have an issue then please include ftp access and we can help.

Best regards,
Mike

Hi,
Glad to hear this works, I had added the post ID (#top.postid-41520) to the code for it to work on the one post to test, and I was not sure if each post was going to be the same or not. You can remove the “#top.postid-41520” part of the code.

So I investigated this further and created a test post on your site and found that this css in the theme was causing the issue:

.avia_mobile .avia-full-stretch {
    background-attachment: scroll !important;
}

So even though you had set the image to “fixed” it was actually getting set to “scroll” and moved the image up and was clipped, I corrected by adding this css in your Quick CSS:

.avia_mobile #top #main .avia-bg-style-fixed .avia-full-stretch {
    background-attachment: fixed !important;
}

Please clear your browser cache and check the test post on mobile. Then please check your other pages on mobile to see if is working for them and if so you can remove the first css I gave you, or use both, it’s up to you.
You may find the first css handy to fine tune some background positions with a pixel value rather than a basic “top” or “center”
For your other question, you can define this custom css with a class and add the class in the color section, please let us know if you still want to do this, I’m not sure if the new info changes your thought about this.

Best regards,
Mike

Hi,
Thank you for the screenshot mockup, first add this css to remove the blue circles and gray line, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.avia-toc-style-elegant {
    padding-left: 0px !important; 
}
.main_color .avia-toc-style-elegant a:first-child:after, .main_color .avia-toc-style-elegant a.avia-toc-level-0:after {
    border-color: #fff !important;
}
.main_color .avia-toc-style-elegant a:before {
    border-color: #fff !important; 
}

Then to add a number before each TOC link Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_toc_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
var i = 0;
$('a.avia-toc-link').each(function(index, element){
    i++;
    $(element).text(i + '. ' + $(element).text());
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_toc_script');

unfortunately, since the number is added to the link we can not change the color to red as in your mockup, I also only tested this on a TOC with no childern, as in your mockup.
This is the expected results:

Please clear your browser cache and check.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hi,
Thanks for the link, I tested your site in Chrome, Firefox, Edge & IE11 but couldn’t find any errors please include a screenshot of the error that you are seeing.
You can add screenshots by uploading your images to a service such as postimages.org and pasting the html code, or link given in your post or Private Content area.

Best regards,
Mike

Hi,
Very good, thanks for using Enfold.

Best regards,
Mike

Hi,
Thanks for the video, I took a look and cleared my cache and the 3 pages look correct, when you clear your cache in Chrome try hitting “F-12” to bring up the developers tools and then right click on your reload button and choose “empty cache and hard reload”
you can only get this menu option when the developers tools are showing, it looks like this:

Best regards,
Mike

Hi,
I took a look at your slider on your 3 home pages and it seems to be working, Please see the screenshots in Private Content area.
But I made a video of the steps I took last time, I first deleted the current layerslider translations, and went back to the screen to show it was gone, then I opened and saved the layerslider so it would be in the translations again, to my surprise they were already translated, so I added the number “1” to the translations to show editing them would work, then I went to all 3 homepages to see if the number “1” was there, and it was.

Best regards,
Mike

Hi,
You will have to change your cookie settings “Default Cookie Behaviour” to “All cookies and services are accepted on first page load, user can opt out”

Best regards,
Mike

Hi,
I did a quick search & test for a popup plugin and found WP Popups it says it works with CF7 and in my test it worked fine with Enfold and the Enfold shortcode and was able to link to a button using a custom class trigger in the popup options, you’ll see the option under triggers when you build your popup.

As for the next & previous, we don’t have an easy way to add these into a custom location or assign them to different buttons like you are asking, but I was able to write this function to get the current next & previous links and replace the links in your custom buttons. This will work now but if your buttons change when you add the popup we may need to adjust the script, but after that it should work for every product.

Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_next_prev(){
	?>
  <script>
(function($){
  $(document).ready(function(){
    var getprev = $("a.avia-post-nav.avia-post-prev").attr("href");
    var getnext = $("a.avia-post-nav.avia-post-next").attr("href");
    $(".woocommerce-product-details__short-description .avia-buttonrow-wrap a.avia-button:nth-child(2)").attr("href", getprev);
    $(".woocommerce-product-details__short-description .avia-buttonrow-wrap a.avia-button:nth-child(3)").attr("href", getnext);
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_next_prev');

Best regards,
Mike

• This reply was modified 5 years, 3 months ago by Mike. Reason: correct an error

Hi,
Thank you for the feedback, I assume that you would like the white header before scroll and transparent after scroll with a white burger menu and social icons, in this case please try this css:

@media only screen and (max-width: 767px) { 
  .header_color .header_bg,#header_meta {
  background-color: transparent !important; 
}
.logo img { 
	opacity: 0; 
}
.logo a { 
	background-image: url(https://scalpinnovation.dk/wp-content/uploads/2018/01/scalpinnovation-header-logo-neg-1.png); background-repeat: no-repeat; background-size: contain; 
}
.header_color:not(.av_header_transparency) div .av-hamburger-inner,.header_color:not(.av_header_transparency) div .av-hamburger-inner:before,.header_color:not(.av_header_transparency) div .av-hamburger-inner:after,.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
  background-color: #fff !important; 
}
.header_color:not(.av_header_transparency) .social_bookmarks a {
  color: #fff !important;
}
.avia-menu.av_menu_icon_beside {
    border-right-width: 0 !important; 
}
}

Please see the screenshot in Private Content area.
I see that when your site is at tablet width, which is above 768px your header is not sticky and so doesn’t become transparent, so I assume what you meant was when it is below 767px while the header is still sticky?
After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hey Carsten,
Thanks for the link, for a transparent header before scroll, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 766px) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  }

but this is a little hard to see your logo, perhaps you could change your logo to white for before scroll.
For a transparent header after scroll, try this css:

@media only screen and (max-width: 766px) { 
  .header_color .header_bg,#header_meta {
  background-color: transparent !important; 
}
}

For always transparent, try this css:

@media only screen and (max-width: 766px) { 
  .header_color .header_bg,#header_meta {
  background-color: transparent !important;}
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  #top .av_header_transparency #header_meta {
    border-bottom: 0 none transparent;}
}

Best regards,
Mike