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 6 years, 2 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

Hi,
Thanks @Guenni007 for the update and for sharing.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Glad to see that you live site is working, so reading your steps above seems that you tried to overwrite the theme files with the new version, this left old files behind from version 3.5.4 and caused the crash, also moving your staging site “.htaccess” file to your live site caused your other errors, each “.htaccess” & “wp-config.php” is unique to each site.
To update your theme please follow these steps:

The easiest and safest way to update is to download the newest version from Theme Forest and rename your current theme folder to “enfold-old” via ftp or your cPanel file manager then upload the new “enfold” folder and check that your site is working correctly.
Should for some reason you wish to roll-back to the old version, it’s easy to do, simply rename the new “enfold” folder to “enfold-new” via ftp or your cPanel file manager and then rename “enfold-old” to “enfold” then refresh your page.
Once you are happy you can delete the “enfold-old” folder via ftp or your cPanel file manager, (not the WP theme page)
Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

Perhaps removing the “index.php” from your links caused them to point to your live site, but this will be the correct step to take for your live site. For your staging site replacing the “index.php” in your links with “/staging586/” would have solved.

Best regards,
Mike

Hi,
Well done on your buttons, I see that your “call us” and “enquere” buttons are opening popups. I also see that your “enquere” has a CF7 form. So I guess your last question is the redirect on submit?
For that please try the Redirection for Contact Form 7 plugin.
While this can be done with javascript, since you are using CF7 I would recommend using this plugin to keep everything working well.
Please let us know if there is anything else we can assist with.

Best regards,
Mike

Hey DivaNails,
Please try adding the css to the Enfold Theme Options > General Styling > Quick CSS field.
After applying the css, Please clear your browser cache and check.
If this works then you have the css & js file merging enabled, while making your css edits directly into the child theme style.css.
The merged files only update then the theme settings are updated, such as clicking the big blue button “save all changes”, saving the style.css file doesn’t update the merged files.
So you could save the theme settings to force re-building the merged file, if the button is not clickable, try adding a blank space into the Quick CSS field to activate the button.

For best results, try disabling the merged css & js, and disable any caching plugin, and enter your css into the “Quick CSS” field while you are creating your site. Once you are done you can move all of your css to the style.css and enable your caching & merging.
I hope this helps explain what is happening.

If this doesn’t help, please include an admin login in the private content area so we can be of more assistance.

Best regards,
Mike