Hi,
The issue is coming from this css:

#menu-cja-menu-left {
    position: absolute;
}

to correct please add this css:

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header_main .container {
    height: 30px !important;
}
#top #wrap_all #menu-cja-menu-left {
    position: relative !important; 
}
}

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

Best regards,
Mike

Hey smarta-brett,
Sorry for the late reply, and thanks for the screenshot, but we are unable to view the page in question to test without a login, please include an admin login.
Did you also add the css from the solution post?

.single-product-main-image {
    width: 25%;
}

.single-product-summary {
    overflow: hidden;
    width: 45%;
    float: left;
    margin-right: 5%;
}

.single-product .sidebar {
    width: 25%;
}

If you didn’t that could be why it’s not working for you, or perhaps try clearing your browser cache.

Best regards,
Mike

Hi,
I took a look at your page and found that your “learn dash” css requires the class “learndash-wrapper” for the section in question, but this class has not been applied. I don’t see any errors for this and I don’t see a way to add the class properly though the backend, and since I have not worked with this plugin before so I recommend asking the learn dash support if they have seen this before.
I can not imagine anything in Enfold that would remove any classes. I do see that you have a custom “course.php” in your child theme that I assume is used to create this page but the other classes are not matching up so I don’t want to try editing it. Perhaps whoever created this for you will be better suited to modify it.
But if none of this helps you I wrote this script to add the class for you based on the page you linked to. Try adding this code to the end of your child theme functions.php file in Appearance > Editor:

function add_learndash_wrapper(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $(".ld-item-list.ld-lesson-list").addClass("learndash-wrapper");
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'add_learndash_wrapper');

expected results:

Best regards,
Mike

Hey anantharam,
To add the “add to cart” button to your homepage and categories, try adding this code to the end of your functions.php file in Appearance > Editor:

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

To make your breadcrumbs fit into your titles ares, 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: 767px) { 
	.single-product .title_container {
		height: 90px !important;
	}
}

for your related products did you add this css:

.related.products li {
    width:18%!important;
}

it is what is making is very small, it should be removed.
For your 4 product tabs, on large phones they may fix into one line with this css:

#top div.product .woocommerce-tabs ul.tabs a {
    padding: 5px !important;
}

but on small phones, such as the iPhone 6, they will not and to make the buttons smaller may make them not usable.
To remove your footer widget spacing, 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: 767px) { 
.responsive #top #wrap_all #footer .widget,.responsive #top #wrap_all #footer .flex_column.av_one_fourth {
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
}
}

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

Best regards,
Mike

Hi,
Try adding multiple layerslider elements to your page, then the layerslider that is first will have the ID #layer_slider_1 and the one below will have the ID #layer_slider_2 then use this css to hide or show the IDs based on screen width:

@media only screen and (min-width: ?px) and (max-width: ?px) { 
    #layer_slider_1 {
        display: block;
    }
    #layer_slider_2 {
        display: none;
    }
}
@media only screen and (min-width: ?px) and (max-width: ?px)  { 
    #layer_slider_2 {
        display: block;
    }
    #layer_slider_1 {
        display: none;
    }
}

change the ?px to the numbers you want.

Best regards,
Mike

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